2012-04-08 10 views
2

私はHTML5ファイル(http://jsfiddle.net/Jbfw2/)で、次のインラインSVGコードを持っている:Chromeでこの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方向に4.5の代わりにholder15に変換すると、クロムは垂直線を正しく表示します。

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

答えて

2

私はそれがバグだとは思わない、それはブラウザがレンダリングを行っている方法との単なる違いである。パターンラインの幅に関連する丸め物がある可能性が最も高いです。私は、種々の値に、変換の最初の値を変更することによって、それら "消える" を作ることができました

IE - 4.8
のFirefox - 6.3
クローム - 4.5

私がお勧めしたいですパターンラインの幅を2に増やすには、このようにして丸め処理が行われないようにして、変換を適用するときに「ワイプアウト」しないようにします。

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

+0

ありがとうございます。できます。 – user1320430

関連する問題