SVG图像不能在IE9中裁剪

Question

以下代码：

<!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中，显示带有边框和SVG对象内部的部分图像的div。svg之外的所有内容都不会被绘制。

IE9显示整个SVG图像。这是一个特性还是一个bug？有没有办法去掉图像的“外框”部分？

拉斐尔框架能正确处理这种情况吗？

Answer 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元素的父边界等。