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

我不认为这是一个错误，这只是浏览器进行渲染的方式不同而已。很可能涉及到与图案线的宽度有关的舍入问题。

我能够通过将 translate 的第一个值更改为各种值来使它们“消失”:

IE - 4.8
火狐 - 6.3
Chrome - 4.5

我建议将图案线的宽度增加到 2，这样它们就不会被舍入，因此在您应用转换时它们不会被“消除”。

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