2

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

在浏览器中查看

应该有一条 1000px 长的水平线 ( path) 被 400px × 400px 剪裁rect。

这条线在 Firefox 和 Internet Explorer (10) 中可见并正确剪裁，但在 Chrome 中完全不可见。只有path完全水平或垂直时才会出现问题，如本例所示。

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

4

2 回答 2

5

我已经完成的解决方法在属性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>

在浏览器中查看

额外moveto的没有明显的效果，但意味着在path技术上不是直的。它在 Chrome 中可见并正确剪辑。

于 2013-10-31T14:46:18.033 回答
2

这确实是一个 Chrome 错误。如果你颠倒<defs>和<path>元素的顺序，那么它就可以工作。这与element基本相同<use>。

于 2013-10-31T14:42:08.807 回答