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 に答える