Bud*_*dda 10 html5 svg cross-browser
以下代码:
<!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框架是否正确处理此类案例？
Kev*_*eno 17
编辑:鉴于我对规范的新理解,我必须在下面纠正自己.
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; }
如果overflow: hidden重写默认值,则以下情况为真:
根据SVG Spec,SVG overflow在包含在使用CSS的文档中时处理与任何其他元素一样.元素溢出内的项目,除非overflow: hidden或者overflow:scroll如果他们超过母的大小.
在您的示例中,我将其视为path超出元素viewbox上定义的svg内容.由于默认值overflow是visible,路径将"渗出"超出svg元素的边界.此外,它超出了svg元素的父边界等.