在Chrome中不可见的SVG直线路径不可见

我相信我在Chrome的SVG渲染中发现了一个错误，但是我想知道是否有任何解决方法。在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>

View in browser

应该有由400像素×400像素rect截取一个1000像素长水平线（path）。

该行在Firefox和Internet Explorer（10）中可见且正确剪辑，但在Chrome中完全不可见。仅当path完全水平或垂直时才存在问题，如this example中所示。

path的d属性是D3.js可以生成的一个等效的要求。

来源

2013-10-31 mnorrish

这确实是Chrome的一个bug。如果您颠倒了<defs>和<path>元素的顺序，那么它就起作用了。这基本上是same issue as with the <use> element。

来源

2013-10-31 14:42:08

这比我的解决方案更好，更整洁 - 谢谢 – mnorrish

我所做工作的一种解决方法增加了一个额外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>

View in browser

额外moveto没有明显的效果，但表示该path是技术上不直。它可以在Chrome中正确显示和剪辑。

来源

2013-10-31 14:46:18 mnorrish

??这很奇怪......除了订单外，还有其他的东西。 –

也许还有更多的东西。我发现''paths'后的'defs'可以看到任何完全水平的（也可能是vetical）'路径'。 – mnorrish

在Chrome中不可见的SVG直线路径不可见

回答

相关问题