Does Chrome incorrectly display this SVG pattern?

Question

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?

Answer 1

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.

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