I have the following inline SVG code in my HTML5 file (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>
This code produces the correct results in Safari and Firefox. However, Chrome does not display all the vertical lines. If I translate holder1 to 5 instead of 4.5 in the X direction, Chrome displays the vertical lines correctly.
Could someone tell me if this is a bug?
I don't think it's a bug, it's just a difference in how browsers are doing the rendering. Most likely there's a rounding thing involved, related to the width of the pattern lines.
I was able to make them "dissapear" by altering the first value of translate, to various values:
IE - 4.8
Firefox - 6.3
Chrome - 4.5
I'd suggest to increase the width of the pattern lines to 2, this way they won't be subjected to rounding so they won't get "wiped out" when you apply the transformations.