svg填充路徑動畫問題

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"> 
 
\t <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> 
 
\t <g id="preventive"> 
 
\t \t <g> 
 
\t \t \t <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 
 
\t \t \t \t 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 
 
\t \t \t \t 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"/> 
 
\t \t \t <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 
 
\t \t \t \t 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 
 
\t \t \t \t 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"/> 
 
\t \t \t <path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/> 
 
\t \t \t <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"/> 
 
\t \t \t <path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/> 
 
\t \t \t <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"/> 
 
\t \t \t <path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/> 
 
\t \t \t <path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/> 
 
\t \t \t <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"/> 
 
\t \t \t <path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/> 
 
\t \t </g> 
 
\t </g> 
 
</svg> 
 
\t \t \t \t \t \t   
 
\t \t \t \t \t \t

我用this exampl，但它並沒有我希望的方式工作，以

這裏是我的js fiddle

沒有人有任何想法如何我可以得到這個工作？

Answer 1

• 如果您不想重複，請不要使用repeatCount。

• 如果你想讓它凍結，因爲它是後動畫使用填充=「凍結」

• 我還調整了動畫的數值，以便停止偏移剛剛從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"> 
 
\t <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> 
 
\t <g id="preventive"> 
 
\t \t <g> 
 
\t \t \t <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 
 
\t \t \t \t 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 
 
\t \t \t \t 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"/> 
 
\t \t \t <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 
 
\t \t \t \t 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 
 
\t \t \t \t 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"/> 
 
\t \t \t <path fill="url(#fill)" d="M834.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1H731.8V209.3H834.3z"/> 
 
\t \t \t <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"/> 
 
\t \t \t <path fill="url(#fill)" d="M1116.2,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1116.2z"/> 
 
\t \t \t <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"/> 
 
\t \t \t <path fill="url(#fill)" d="M1376.5,236.7v114.7h-31.7V236.7h-40.3v-27.5h112.3v27.5H1376.5z"/> 
 
\t \t \t <path fill="url(#fill)" d="M1439.7,209.3h31.7v142.2h-31.7V209.3z"/> 
 
\t \t \t <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"/> 
 
\t \t \t <path fill="url(#fill)" d="M1755.3,209.3v28.3h-70.8v29.3h63.7v27.1h-63.7v29.5h73v28.1h-104.7V209.3H1755.3z"/> 
 
\t \t </g> 
 
\t </g> 
 
</svg> 
 
\t \t \t \t \t \t   
 
\t \t \t \t \t \t