SVG 动画图案边缘

Posted 2023-05-08

【中文标题】SVG 动画图案边缘

【英文标题】：SVG Animations pattern edge

【发布时间】：2017-07-24 12:51:58

【问题描述】：

我想创建条纹动画背景，但由于某种原因无法删除出现在图案边缘的垂直线。

这是我的 svg：

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

【参考方案1】：

我知道这篇文章有点旧，但如果你仍然需要解决这个问题，我已经通过将条纹加倍、删除图案内的一个矩形然后将最后一个矩形的大小加倍来使其工作，cf ，如下代码：

<svg  >
    <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"  fill="green"  mask="url(#stripe-mask)"></rect>
</svg>

我认为每当浏览器计算两个矩形的位置时，垂直条纹的出现是由于一些小的数值问题。因此，解决方案是只使用一个矩形。