SVG 图像在 IE9 中未裁剪答案

【问题标题】：SVG image is not cropped in IE9SVG 图像在 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 height="100" width="100" 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 框架是否正确处理这种情况？

【问题讨论】：

标签： html cross-browser svg

【解决方案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 应该隐藏它的溢出。我开始认为没有理由。