4

我正在使用一个内联的 svg 填充一个带有线条图案的区域。svg 正确显示 Chrome 和 Safari，但在 Firefox 上，模式的垂直重复之间存在间隙，如下所示：

<svg version="1.1" id="clouds" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 744.9 203" preserveAspectRatio="xMinYMin meet ">
    <pattern  x="66.95" y="122" width="24" height="24" patternUnits="userSpaceOnUse" id="line-fill" viewBox="0 -24 24 24" overflow="visible">
        <polygon fill="none" points="0,0 24,0 24,-24 0,-24"/>
        <g>
            <polygon fill="#D83D96" points="4.4,-9.5 0,-5.1 0,-6.9 9.5,-16.4 9.5,-16.4 17.1,-24 18.9,-24 16.7,-21.5 16.7,-21.5"/>
            <polygon fill="#D83D96" points="4.4,-21.5 0,-17.1 0,-18.9 5.1,-24 6.9,-24"/>
            <polygon fill="#D83D96" points="24,-6.9 24,-5.1 18.9,0 17.1,0 21.8,-4.4"/>
            <polygon fill="#D83D96" points="24,-18.9 24,-17.1 16.7,-9.5 16.7,-9.5 6.9,0 5.1,0 9.5,-4.4 9.5,-4.4 21.8,-16.4"/>
        </g>
    </pattern>
    <g fill="url(#line-fill)">
        <circle cx="12.5" cy="22.5" r="12.5"/>
        <path d="M180.5,54.5c-10.1,0-19.6,2.3-28.1,6.5c6.3-6.5,10.1-15.3,10.1-25c0-19.9-16.1-36-36-36
            c-18.9,0-34.4,14.6-35.9,33.1c-4.2-4.1-9.9-6.6-16.2-6.6C61.5,26.5,51,37,51,49.9c0,12.7,10.1,23,22.6,23.4
            C64.7,79.9,59,90.5,59,102.5c0,20.2,16.3,36.5,36.5,36.5c8.4,0,16.1-2.8,22.3-7.6c6,29.2,31.8,51.1,62.7,51.1c35.3,0,64-28.7,64-64
            C244.5,83.2,215.8,54.5,180.5,54.5z M126.8,83.7c-6.4-10.6-18-17.7-31.3-17.7c-1.5,0-2.9,0.1-4.4,0.3c2.7-2.7,4.7-6.1,5.8-9.8
            c6.5,9.4,17.3,15.6,29.6,15.6c4.4,0,8.7-0.8,12.6-2.3C134.3,73.8,130.2,78.5,126.8,83.7z"/>
        <path d="M702.8,87.9v-0.3h0c-0.2-18.3-15-33.1-33.4-33.1S636.2,69.3,636,87.6h-2.2
            c1.4-3.9,2.1-8.2,2.1-12.6c0-21-17-38-38-38c-16.7,0-30.8,10.7-35.9,25.7c-4.2-17.5-20.4-30.6-39.8-30.6c-18.4,0-33.9,11.7-39,27.8
            V41h0c0-0.3,0-0.7,0-1c0-15.1-12.3-27.4-27.4-27.4c-15.1,0-27.4,12.3-27.4,27.4c0,0.3,0,0.7,0,1h-3.9
            c-1.4-12.1-11.7-21.5-24.2-21.5c-12.5,0-22.8,9.4-24.2,21.5H376v81.3h107.3v-0.1h219.5V87.9C702.8,87.9,702.8,87.9,702.8,87.9
            C702.8,87.9,702.8,87.9,702.8,87.9z M562.1,87.6h-2.6c0.6-1.2,1.1-2.5,1.5-3.8C561.4,85.1,561.7,86.4,562.1,87.6z M483.3,83.1
            c0.5,1.5,1.1,3,1.8,4.5h-1.8V83.1z"/>
        <circle cx="642" cy="172.6" r="30.4"/>
        <circle cx="732.6" cy="173.6" r="12.2"/>
    </g>
</svg>

这是一个摆弄的小提琴：http: //jsfiddle.net/Qs3Y9/

这似乎可能是一个舍入问题，因为随着边界框的大小调整，间隙消失并重新出现，但我对 svg 模式相当陌生，所以我什至不知道从哪里开始寻找解决方案。

4

1 回答 1

3

它也发生在 Webkit 和其他浏览器上。只是不那么明显。这只是与图案方块接触的抗锯齿有关。您可以通过不让影线完全在图案边界处终止来减轻它。让他们延伸过去一点。不会绘制扩展名，但这意味着抗锯齿将不可见（或几乎不可见）。

<pattern  x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse" id="line-fill" viewBox="0 0 24 24" overflow="visible" stroke="#D83D96" stroke-width="1.5">
   <line x1="-2" y1="8" x2="8" y2="-2"/>
   <line x1="-2" y1="20" x2="20" y2="-2"/>
   <line x1="4" y1="26" x2="26" y2="4"/>
   <line x1="16" y1="26" x2="26" y2="16"/>
</pattern>

在这里演示：http: //jsfiddle.net/Qs3Y9/2/

于 2013-10-16T13:04:23.000 回答