剪切路径的SVG直线路径在Chrome中不可见 [英] SVG straight path with clip-path not visible in Chrome
问题描述
我相信我在Chrome的SVG渲染中发现了一个错误，但是我想知道是否有任何解决方法。
I believe that I've found a bug in Chrome's SVG rendering however I'd like to know if there are any workarounds.
使用这样的代码： / p>
With code like this:
<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>
应该有一个长度为1000px的水平线（ code>）剪裁为一个400px×400px rect 。
There should be a 1000px long horizontal line (path) clipped by a 400px × 400px rect.
Firefox和Internet Explorer（10），但它在Chrome中完全不可见。
如果路径完全是水平或垂直的，则存在此问题，如此示例。
The line is visible and correctly clipped in Firefox and Internet Explorer (10) but it is completely invisible in Chrome.
There problem only exists if the path is completely horizontal or vertical as shown in this example.
要求 d < 路径的code>属性是D3.js可以生成的等式。
It is a requirement that the d attribute of the path is an equivelent which D3.js can generate.
推荐答案
这确实是一个Chrome错误。如果你颠倒< defs> 和< path> 元素的顺序，这基本上是与< use>相同的问题; 元素。
This is indeed a Chrome bug. If you reverse the order of <defs> and the <path> element, then it works. This is basically the same issue as with the <use> element.
这篇关于剪切路径的SVG直线路径在Chrome中不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
