我相信我在 Chrome 的 SVG 渲染中发现了一个错误，但我想知道是否有任何解决方法。
使用这样的代码：
<html>
<body>
<svg>
<path clip-path="url(#clip)" d="M 0,100 H 1000 V 100" style="stroke: #000; stroke-width: 2px"></path>
<defs>
<clipPath id="clip">
<rect width="400" height="400"></rect>
</clipPath>
</defs>
</svg>
</body>
</html>
在浏览器中查看 https://rawgithub.com/mnorrish/7249967/raw/21b76b680cde35e25c98dbc57086773ea72fa02c/SVGclipPathTest.html
应该有一条 1000px 长的水平线（path) 由 400px × 400px 裁剪rect.
该线在 Firefox 和 Internet Explorer (10) 中可见并被正确剪切，但在 Chrome 中完全不可见。
仅当以下情况时才存在问题path完全水平或垂直，如图所示这个例子 https://rawgithub.com/mnorrish/7249967/raw/e00194669cd68cd2839d52c89c0caa4114d299c1/SVGclipPathTest.html.
要求d的属性path是 D3.js 可以生成的等效项。
我所做的解决方法增加了额外的moveto命令到开头d属性：
<path clip-path="url(#clip)" d="M -10,-10 M 0,100 H 1000 V 100" style="stroke: #000; stroke-width: 2px"></path>
在浏览器中查看 https://rawgithub.com/mnorrish/7249967/raw/94d5a2babec7214108540735456ef8c6a6808da7/SVGclipPathTest.html
额外的moveto没有明显的效果，但意味着path从技术上来说并不直接。它在 Chrome 中可见并正确剪辑。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
