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>

ブラウザで表示

path400px × 400px で切り取られた1000px の長い水平線 ( ) があるはずですrect。

線は、Firefox と Internet Explorer (10) では表示され、正しくクリップされますが、Chrome では完全に表示されません。この例pathに示すように、 が完全に水平または垂直である場合にのみ問題が発生します。

dの属性は、pathD3.js が生成できる同等のものである必要があります。

4

2 に答える 2

2

これは確かに Chrome のバグです。要素の順序を逆にする<defs>と、機能します。<path>これは基本的に要素と同じ問題<use>です。

于 2013-10-31T14:42:08.807 に答える