SVG 图像在 IE9 中未裁剪
Posted
技术标签:
【中文标题】SVG 图像在 IE9 中未裁剪【英文标题】：SVG image is not cropped in IE9 【发布时间】：2011-08-23 16:49:00 【问题描述】：以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Test.</title>
</head>
<body>
<div style="border: solid 1px black; height:100px; width:100px">
<svg viewbox="00 0 100 100">
<path id="map1" d="M210 10 L90 10 L90 90 " fill="red"/>
</svg>
</div>
</html>
JSFiddle：http://jsfiddle.net/HRsvX/
在 Chrome 和 FF4 中显示带有边框的 div 和 SVG 对象内部的部分图像。 svg 之外的所有内容均未绘制。
IE9 显示整个 SVG 图像。它是一个功能还是一个错误？有什么方法可以剪切图像的“出站”部分？
Raphael 框架是否正确处理这种情况？
【问题讨论】：
【参考方案1】：编辑：鉴于我的new understanding of the spec，我必须在下面更正自己。
规范要求svg命名空间中元素的默认样式为：
svg, symbol, image, marker, pattern, foreignObject overflow: hidden
svg width:attr(width); height:attr(height)
每http://www.w3.org/TR/SVG/styling.html#UAStyleSheet
所以，如果你想让 IE9 符合你可以使用：
svg:not(:root) overflow: hidden;
按照here 和here 的建议。
如果默认 overflow: hidden 被覆盖，则以下情况为真：
根据SVG Spec，当包含在使用CSS 的文档中时，SVG 会像处理任何其他元素一样处理overflow。元素内的项目溢出，除非 overflow: hidden 或 overflow:scroll 如果它们超过父级的大小。
在您的示例中，我认为path 超过了svg 元素上定义的viewbox。由于默认的overflow 是visible，因此路径将“溢出”到svg 元素的边界之外。此外，它会超出svg 元素的父边界等。
【讨论】：
顺便说一句，IE10 也遇到了这个错误。 你刚刚用这个答案为我节省了几个小时。对于 gwt 和 lib-gwt-svg 库有此问题的任何其他人，您可以在您的 css 文件中包含 svg overflow:hidden;。 kevin，这是否意味着 '(:not)' 部分是无关的？ @Ringo 好问题，我只是粘贴，因为当时其他浏览器已经实现了它。看了我的回答，我想你是对的。不过，我必须深入研究才能确定。我的猜测是，它是对规范期望的 HTML 特定优化，因为大多数浏览器在点击 HTML 文档中的第一个 SVG 元素后进入 SVG 模式。 我只是想了解为什么根 svg 不溢出如此重要。我在几个不同的网站上看到过这个not(:root)，但还没有理解为什么根 svg 应该隐藏它的溢出。我开始认为没有理由。以上是关于SVG 图像在 IE9 中未裁剪的主要内容，如果未能解决你的问题，请参考以下文章