Question

我正在制作svg动画并尝试将这些字母填充一次。当它们被填满时，动画必须停止。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 688" enable-background="new 0 0 2000 688" xml:space="preserve">
	<linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0">
          <stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
          <stop offset="40%" stop-opacity="1" stop-color="royalblue">
            <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="4s" begin="0s"/>
          </stop>
          <stop offset="40%" stop-opacity="0" stop-color="royalblue">
            <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="4s"  begin="0s"/>
          </stop>
          <stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
      </linearGradient>
	<g id="preventive">
		<g> 
			<path fill="url(#fill)" d="M541,222c10,8.5,15,21.5,15,39c0,17.6-5.1,30.4-15.4,38.5c-10.2,8.1-25.9,12.2-46.9,12.2h-18.9v39.7h-31.7
				V209.3h50.2C515.2,209.3,531.1,213.5,541,222z M517.7,277.9c3.8-4.3,5.7-10.5,5.7-18.7c0-8.2-2.5-14-7.4-17.5
				c-5-3.5-12.6-5.2-23.1-5.2h-18.1v47.8h21.4C506.8,284.3,514,282.2,517.7,277.9z"/>
			<path fill="url(#fill)" d="M698,256.5c0,22.8-9,37.5-27.1,44.1l36,50.8h-39.1l-31.5-45.4h-22v45.4h-31.7V209.3h53.9
				c22.1,0,37.9,3.7,47.3,11.2C693.3,227.9,698,239.9,698,256.5z M659.7,273.4c3.9-3.5,5.9-9.1,5.9-16.8c0-7.7-2-12.9-6.1-15.8
				c-4.1-2.8-11.2-4.3-21.4-4.3h-23.8v42.1h23.2C648.4,278.6,655.8,276.9,659.7,273.4z"/>
			<path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/>
			<path fill="url(#fill)" d="M923,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L923,299.8z"/>
			<path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/>
			<path fill="url(#fill)" d="M1249.9,209.3h31.7v142.2h-31.7l-67.7-89.1v89.1h-31.7V209.3h29.7l69.8,91.5V209.3z"/>
			<path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/>
			<path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/>
			<path fill="url(#fill)" d="M1562.1,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L1562.1,299.8z"/>
			<path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/>
		</g>
	</g>
</svg>

我使用了this exampl，但它不能按我想要的方式工作

这是我的js fiddle

有没有人知道如何才能让它发挥作用？

Answer 1

如果您不想重复，请不要使用repeatCount。
如果你希望它冻结，因为它是动画后使用fill =“freeze”
我还调整了动画的值，所以停止偏移从0变为1

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 688" enable-background="new 0 0 2000 688" xml:space="preserve">
	<linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0">
          <stop offset="0%" stop-opacity="1" stop-color="royalblue"/>
          <stop offset="40%" stop-opacity="1" stop-color="royalblue">
            <animate attributeName="offset" values="0;1" dur="4s" begin="0s" fill="freeze"/>
          </stop>
          <stop offset="40%" stop-opacity="0" stop-color="royalblue">
            <animate attributeName="offset" values="0;1" dur="4s"  begin="0s fill="freeze"/>
          </stop>
          <stop offset="100%" stop-opacity="0" stop-color="royalblue"/>
      </linearGradient>
	<g id="preventive">
		<g> 
			<path fill="url(#fill)" d="M541,222c10,8.5,15,21.5,15,39c0,17.6-5.1,30.4-15.4,38.5c-10.2,8.1-25.9,12.2-46.9,12.2h-18.9v39.7h-31.7
				V209.3h50.2C515.2,209.3,531.1,213.5,541,222z M517.7,277.9c3.8-4.3,5.7-10.5,5.7-18.7c0-8.2-2.5-14-7.4-17.5
				c-5-3.5-12.6-5.2-23.1-5.2h-18.1v47.8h21.4C506.8,284.3,514,282.2,517.7,277.9z"/>
			<path fill="url(#fill)" d="M698,256.5c0,22.8-9,37.5-27.1,44.1l36,50.8h-39.1l-31.5-45.4h-22v45.4h-31.7V209.3h53.9
				c22.1,0,37.9,3.7,47.3,11.2C693.3,227.9,698,239.9,698,256.5z M659.7,273.4c3.9-3.5,5.9-9.1,5.9-16.8c0-7.7-2-12.9-6.1-15.8
				c-4.1-2.8-11.2-4.3-21.4-4.3h-23.8v42.1h23.2C648.4,278.6,655.8,276.9,659.7,273.4z"/>
			<path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/>
			<path fill="url(#fill)" d="M923,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L923,299.8z"/>
			<path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/>
			<path fill="url(#fill)" d="M1249.9,209.3h31.7v142.2h-31.7l-67.7-89.1v89.1h-31.7V209.3h29.7l69.8,91.5V209.3z"/>
			<path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/>
			<path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/>
			<path fill="url(#fill)" d="M1562.1,299.8l36.2-90.5h34.4l-57.2,142.2h-26.8l-57.2-142.2h34.4L1562.1,299.8z"/>
			<path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/>
		</g>
	</g>
</svg>

svg填充路径动画问题

1 个答案: