3

我的 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 不会显示所有垂直线。如果我平移holder1而5不是4.5X 方向，Chrome 会正确显示垂直线。

有人可以告诉我这是否是一个错误吗？

4

1 回答 1

3

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

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

IE - 4.8
火狐 - 6.3
铬 - 4.5

我建议将图案线的宽度增加到 2，这样它们就不会被四舍五入，这样当你应用转换时它们就不会被“抹去”。

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

于 2012-04-08T16:58:45.620 回答