SVG模式在Firefox中重複之間包含空格

我正在使用內聯svg填充帶有內襯模式的區域。 SVG的顯示正確鉻和Safari但Firefox上有在所述圖案的垂直重複之間的間隙，如下所示：SVG模式在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模式相當陌生，所以我甚至無法從何處開始尋找解決方案。

來源

2013-10-15 Godwin

聽起來像一個錯誤，也許是相同的，因爲這一個：https://bugzilla.mozilla.org/show_bug.cgi?id=843057（薄髮際上可見Linux上的Firefox也是如此）。 –

它也發生在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-16 13:04:23

SVG模式在Firefox中重複之間包含空格

回答

相關問題