3

HTML5ファイル（http://jsfiddle.net/Jbfw2/）に次のインラインSVGコードがあります。

<div style="width: 1150px; height: 900px;">
  <svg width="1150" height="900">
    <defs>
      <pattern id="line1" x="0" y="0" width="5" height="200" patternUnits="userSpaceOnUse">
        <path fill="#ffffff" d="M 0 0 L 5 0 L 5 200 L 0 200 Z"/>
        <path id="horizontal" stroke-width="1" stroke="#000" d="M 0 0 L 5 0"/>
        <path id="vertical" stroke-width="1" stroke="#000" d="M 5 0 L 5 200"/>
      </pattern>
    </defs>
    <g id="holder1" transform="translate(4.5,50) matrix(1,2,0,1,0,0)">
      <rect x="0" y="0" width="75" height="200" fill="url(#line1)"></rect>
    </g>
   </svg>
 </div>

このコードは、SafariとFirefoxで正しい結果を生成します。ただし、Chromeはすべての垂直線を表示するわけではありません。X方向ではなくに変換holder1すると、Chromeは垂直線を正しく表示します。54.5

これがバグかどうか誰かに教えてもらえますか？

4

1 に答える 1

3

これはバグではないと思います。ブラウザのレンダリング方法の違いにすぎません。ほとんどの場合、パターン ラインの幅に関連して、丸めが関係しています。

translate の最初の値をさまざまな値に変更することで、それらを「消す」ことができました。

IE - 4.8
ファイアフォックス - 6.3
クローム - 4.5

パターン ラインの幅を 2 ​​に増やすことをお勧めします。この方法では、丸めの影響を受けないため、変換を適用したときに「一掃」されません。

http://jsfiddle.net/Jbfw2/1/

于 2012-04-08T16:58:45.620 に答える