Zeigt Chrome dieses SVG-Muster falsch an?

Question

Ich habe folgenden Inline-SVG-Code in meiner HTML5-Datei (http://jsfiddle.net/Jbfw2/):

<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> 

Dieser Code die richtigen Ergebnisse in Safari und Firefox erzeugt. Chrome zeigt jedoch nicht alle vertikalen Linien an. Wenn ich holder1 zu 5 anstelle von 4.5 in X-Richtung übersetze, zeigt Chrome die vertikalen Linien korrekt an.

Kann mir jemand sagen, ob das ein Fehler ist?

Answer 1

Ich glaube nicht, dass es ein Fehler ist, es ist nur ein Unterschied in wie Browser das Rendern machen. Wahrscheinlich ist eine Rundung involviert, die mit der Breite der Musterlinien zusammenhängt.

Ich konnte sie "verschwinden" machen, indem Sie den ersten Wert zu übersetzen, auf verschiedene Werte verändern:

IE - 4.8
Firefox - 6.3
Chrome - 4.5

Ich würde vorschlagen Um die Breite der Musterlinien auf 2 zu erhöhen, werden sie nicht gerundet, so dass sie nicht "ausgelöscht" werden, wenn Sie die Transformationen anwenden.

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