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中显示带边框的div和SVG对象INSIDE的部分图像。 svg之外的所有东西都没有画出来。

IE9显示整个SVG图像。它是一个功能还是一个bug？有没有办法削减图像的'outbounding'部分？

Raphael框架是否正确处理了这种情况？

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，SVG处理overflow与任何其他元素一样，当包含在使用CSS的文档中时。除非overflow: hidden或overflow:scroll超出父级的大小，否则元素内的项目会溢出。

在您的示例中，我看到path超过viewbox元素上定义的svg。由于默认overflow为visible，因此路径将“渗透”超出svg元素的边界。此外，它会超出svg元素的父边界等。

在IE9中不会裁剪SVG图像

1 个答案: