Question

我相信我在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

应该有一个1000像素长的水平线（path）被400px×400px rect剪切。

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

要求d的{{1}}属性是D3.js可以生成的等价物。

Answer 1

我工作的解决方法在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中可见并正确剪裁。

Answer 2

这确实是Chrome漏洞。如果您颠倒<defs>和<path>元素的顺序，那么它可以正常工作。这基本上是same issue as with the <use> element。

SVG直线路径，在Chrome中无法看到剪辑路径

2 个答案: