带有剪辑路径的 SVG 直线路径在 Chrome 中不可见

mno*_*ish 1 css svg google-chrome render d3.js

我相信我在 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>
Run Code Online (Sandbox Code Playgroud)

在浏览器中查看

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

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

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

mno*_*ish 5

我所做的解决方法movetod属性的开头添加了一个额外的命令:

<path clip-path="url(#clip)" d="M -10,-10 M 0,100 H 1000 V 100" style="stroke: #000; stroke-width: 2px"></path>
Run Code Online (Sandbox Code Playgroud)

在浏览器中查看

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