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
Firefox - 6.3
Chrome - 4.5

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

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

Chrome是否错误地显示此SVG模式？

1 个答案: