Chrome是否錯誤地顯示此SVG圖案？

Question

我在我的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翻譯爲5而不是4.5，Chrome會正確顯示垂直線。

有人可以告訴我，如果這是一個錯誤？

Answer 1

我不認爲這是一個錯誤，它只是瀏覽器如何做渲染的區別。很可能涉及一個四捨五入的東西，與圖案線的寬度有關。

我能夠通過改變翻譯的第一個值，使他們 「dissapear」，各種價值觀：

IE - 4.8
火狐 - 6.3
瀏覽器 - 4.5

我建議將圖案線的寬度增加到2，這樣它們就不會被舍入，所以當你應用變換時它們不會被「消除」。

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