我希望创建一个条纹动画背景,但是由于某种原因无法去除出现在图案边缘的垂直线条。
以下是我的SVG代码:
<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='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" width="200" fill="green" height="200" mask="url(#stripe-mask)"></rect>
</svg>