Question

我想創建條紋動畫背景，但出於某種原因無法刪除出現在圖案邊緣的垂直線條。

這裏是我的SVG：

<svg width="500" height="500"> 
 
     <defs> 
 
\t \t <linearGradient id='stripe-gradient' x1='0%' y1='0%' x2='100%' y2='100%'> 
 
      <stop offset='0%' stop-color='#AAA'></stop> 
 
\t \t \t <stop offset='24.9%' stop-color='#AAA'></stop> 
 
      <stop offset='25%' stop-color='#666'></stop> 
 
\t \t \t <stop offset='49.9%' stop-color='#666'></stop> 
 
\t \t \t <stop offset='50%' stop-color='#AAA'></stop> 
 
\t \t \t <stop offset='74.9%' stop-color='#AAA'></stop> 
 
\t \t \t <stop offset='75%' stop-color='#666'></stop> 
 
\t \t \t <stop offset='99.9%' stop-color='#666'></stop> 
 
\t \t \t <stop offset='100%' stop-color='#AAA'></stop> 
 
\t \t </linearGradient> 
 
     <pattern id='stripe-pattern' width='20' height='20' patternUnits='userSpaceOnUse' > 
 
\t \t \t <rect x='-20' y='0' width='20' height='20' fill='url(#stripe-gradient)' stroke-width='0' stroke='none'> 
 
\t \t \t \t <animate attributeName='x' from='-20' to='0' dur='0.5s' repeatCount='indefinite'></animate> 
 
\t \t \t </rect> 
 
\t   <rect x='0' y='0' width='20' height='20' fill='url(#stripe-gradient)' stroke-width='0' stroke='none'> 
 
\t \t \t \t <animate attributeName='x' from='0' to='20' dur='0.5s' repeatCount='indefinite'></animate> 
 
\t \t \t </rect> 
 
     </pattern> 
 
     <mask id='stripe-mask'> 
 
      <rect x='0' y='0' width='100%' height='100%' fill='url(#stripe-pattern)' ></rect> 
 
     </mask>  
 
     </defs> 
 
     <rect class="hbar thing" x="0" y="0" width="200" fill="green" height="200" mask="url(#stripe-mask)"></rect> 
 
    </svg>

Answer 1

我知道這個帖子是有點老了，但如果你仍然需要解決這個問題，我已通過條紋加倍工作，去除所述圖案內的rects之一，然後加倍最後RECT的大小，CF，以下代碼：

<svg width="500" height="500"> 
 
    <defs> 
 
     <linearGradient id='stripe-gradient' x1='0%' y1='0%' x2='100%' y2='100%'> 
 
      <stop offset='0%' stop-color='#AAA'></stop> 
 
      <stop offset='12.45%' stop-color='#AAA'></stop> 
 
      <stop offset='12.5%' stop-color='#666'></stop> 
 
      <stop offset='24.45%' stop-color='#666'></stop> 
 
      <stop offset='25.5%' stop-color='#AAA'></stop> 
 
      <stop offset='37.45%' stop-color='#AAA'></stop> 
 
      <stop offset='37.5%' stop-color='#666'></stop> 
 
      <stop offset='49.9%' stop-color='#666'></stop> 
 
      <stop offset='50%' stop-color='#AAA'></stop> 
 
      <stop offset='62.45%' stop-color='#AAA'></stop> 
 
      <stop offset='62.5%' stop-color='#666'></stop> 
 
      <stop offset='74.95%' stop-color='#666'></stop> 
 
      <stop offset='75%' stop-color='#AAA'></stop> 
 
      <stop offset='87.45%' stop-color='#AAA'></stop> 
 
      <stop offset='87.5%' stop-color='#666'></stop> 
 
      <stop offset='100%' stop-color='#666'></stop> 
 
     </linearGradient> 
 
     <pattern id='stripe-pattern' width='20' height='20' patternUnits='userSpaceOnUse' > 
 
      <rect x='-20' y='0' width='40' height='40' fill='url(#stripe-gradient)' stroke-width='0' stroke='none'> 
 
       <animate attributeName='x' from='-20' to='0' dur='0.5s' repeatCount='indefinite'></animate> 
 
      </rect> 
 
     </pattern> 
 
     <mask id='stripe-mask'> 
 
      <rect x='0' y='0' width='100%' height='100%' fill='url(#stripe-pattern)'></rect> 
 
     </mask>  
 
    </defs> 
 
    <rect x="0" y="0" width="200" fill="green" height="200" mask="url(#stripe-mask)"></rect> 
 
</svg>

我認爲垂直條紋出現在瀏覽器計算兩個矩形的位置時，由於一些小的數值問題。因此，解決方案是隻使用一個矩形。