如何動畫這個SVG路徑，使其看起來像箭頭正在繪製？

Question

我有一個在Illustrator中創建的箭頭的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 850 683" style="enable-background:new 0 0 792 612;" xml:space="preserve"> 

<linearGradient id="lg" x1="0.5" y1="1" x2="0.5" y2="0"> 
      <stop offset="0%" stop-opacity="1" stop-color="#fff"></stop> 
      <stop offset="0.29" stop-opacity="1" stop-color="#fff"> 
      <animate attributeName="offset" values="1;0;1" repeatCount="indefinite" dur="10s" begin="0s"></animate> 
      </stop> 
      <stop offset="0.29" stop-opacity="0" stop-color="#fff"> 
      <animate attributeName="offset" values="1;0;1" repeatCount="indefinite" dur="10s" begin="0s"></animate> 
      </stop> 
      <stop offset="100%" stop-opacity="0" stop-color="royalblue"></stop> 
     </linearGradient> 

<path class="st4 arrow" fill="url(#lg" d="M500.3,201.9l-33.7,17.5l10.1,6.4l-71,111.4l-39.9-62.3c0,0,0,0-0.1-0.1c-0.1-0.2-0.3-0.4-0.5-0.6 
c-0.1-0.2-0.3-0.3-0.4-0.5c-0.1-0.1-0.3-0.3-0.4-0.4c-0.2-0.2-0.4-0.4-0.7-0.5c0,0,0,0-0.1-0.1c-0.1-0.1-0.3-0.1-0.4-0.2 
c-0.2-0.1-0.5-0.3-0.7-0.4c-0.2-0.1-0.4-0.2-0.7-0.2c-0.2-0.1-0.4-0.1-0.6-0.2c-0.2,0-0.5-0.1-0.7-0.1c-0.2,0-0.4,0-0.6,0 
c-0.2,0-0.5,0-0.7,0.1c-0.2,0-0.4,0-0.7,0.1c-0.2,0-0.5,0.1-0.7,0.2c-0.2,0.1-0.4,0.1-0.6,0.2c-0.3,0.1-0.5,0.2-0.8,0.4 
c-0.1,0.1-0.3,0.1-0.4,0.2c0,0,0,0-0.1,0.1c-0.2,0.2-0.5,0.3-0.7,0.5c-0.1,0.1-0.3,0.2-0.4,0.4c-0.1,0.1-0.3,0.3-0.4,0.5 
c-0.2,0.2-0.3,0.4-0.5,0.6c0,0,0,0-0.1,0.1l-72.8,113c-2.1,3.3-1.2,7.6,2.1,9.7c1.2,0.8,2.5,1.1,3.8,1.1c2.3,0,4.6-1.1,5.9-3.2 
l66.8-103.7l39.9,62.4c0,0,0,0,0.1,0.1c0.3,0.5,0.6,0.9,1,1.2c0.1,0.1,0.2,0.2,0.3,0.3c0.2,0.2,0.4,0.4,0.7,0.5 
c0.1,0,0.1,0.1,0.2,0.1c0.4,0.2,0.8,0.4,1.2,0.5c0.2,0.1,0.4,0.2,0.6,0.2c0.5,0.1,1.1,0.2,1.7,0.2c0,0,0.1,0,0.1,0 
c0.6,0,1.2-0.1,1.8-0.3c0.2,0,0.3-0.1,0.5-0.2c0.4-0.2,0.9-0.3,1.3-0.6c0.1,0,0.1,0,0.2-0.1c0.2-0.1,0.4-0.3,0.6-0.5 
c0.1-0.1,0.3-0.2,0.4-0.3c0.4-0.4,0.7-0.8,1-1.2c0,0,0.1-0.1,0.1-0.1l77-120.7l10.1,6.4L500.3,201.9z"></path> 

</svg> 

基本上我只想動畫看起來像箭頭從左至右畫上......我不認爲關閉：/誰能幫助？

https://jsfiddle.net/cnilsson/g4wfpmr9/

Answer 1

你可以只改變你的梯度，以便它從左變到右，而不是自下而上。也許這對你的需求是足夠好的？

body { 
 
    background-color: grey; 
 
}

<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 850 683" style="enable-background:new 0 0 792 612;" xml:space="preserve"> 
 

 
<linearGradient id="lg" x1="0" y1="0" x2="1" y2="0"> 
 
      <stop offset="0%" stop-opacity="1" stop-color="#fff"></stop> 
 
      <stop offset="0.29" stop-opacity="1" stop-color="#fff"> 
 
      <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="5s" begin="0s"></animate> 
 
      </stop> 
 
      <stop offset="0.29" stop-opacity="0" stop-color="#fff"> 
 
      <animate attributeName="offset" values="0;1;0" repeatCount="indefinite" dur="5s" begin="0s"></animate> 
 
      </stop> 
 
      <stop offset="100%" stop-opacity="0" stop-color="royalblue"></stop> 
 
     </linearGradient> 
 
     
 
     <path class="st4 arrow" fill="url(#lg)" d="M500.3,201.9l-33.7,17.5l10.1,6.4l-71,111.4l-39.9-62.3c0,0,0,0-0.1-0.1c-0.1-0.2-0.3-0.4-0.5-0.6 
 
c-0.1-0.2-0.3-0.3-0.4-0.5c-0.1-0.1-0.3-0.3-0.4-0.4c-0.2-0.2-0.4-0.4-0.7-0.5c0,0,0,0-0.1-0.1c-0.1-0.1-0.3-0.1-0.4-0.2 
 
c-0.2-0.1-0.5-0.3-0.7-0.4c-0.2-0.1-0.4-0.2-0.7-0.2c-0.2-0.1-0.4-0.1-0.6-0.2c-0.2,0-0.5-0.1-0.7-0.1c-0.2,0-0.4,0-0.6,0 
 
c-0.2,0-0.5,0-0.7,0.1c-0.2,0-0.4,0-0.7,0.1c-0.2,0-0.5,0.1-0.7,0.2c-0.2,0.1-0.4,0.1-0.6,0.2c-0.3,0.1-0.5,0.2-0.8,0.4 
 
c-0.1,0.1-0.3,0.1-0.4,0.2c0,0,0,0-0.1,0.1c-0.2,0.2-0.5,0.3-0.7,0.5c-0.1,0.1-0.3,0.2-0.4,0.4c-0.1,0.1-0.3,0.3-0.4,0.5 
 
c-0.2,0.2-0.3,0.4-0.5,0.6c0,0,0,0-0.1,0.1l-72.8,113c-2.1,3.3-1.2,7.6,2.1,9.7c1.2,0.8,2.5,1.1,3.8,1.1c2.3,0,4.6-1.1,5.9-3.2 
 
l66.8-103.7l39.9,62.4c0,0,0,0,0.1,0.1c0.3,0.5,0.6,0.9,1,1.2c0.1,0.1,0.2,0.2,0.3,0.3c0.2,0.2,0.4,0.4,0.7,0.5 
 
c0.1,0,0.1,0.1,0.2,0.1c0.4,0.2,0.8,0.4,1.2,0.5c0.2,0.1,0.4,0.2,0.6,0.2c0.5,0.1,1.1,0.2,1.7,0.2c0,0,0.1,0,0.1,0 
 
c0.6,0,1.2-0.1,1.8-0.3c0.2,0,0.3-0.1,0.5-0.2c0.4-0.2,0.9-0.3,1.3-0.6c0.1,0,0.1,0,0.2-0.1c0.2-0.1,0.4-0.3,0.6-0.5 
 
c0.1-0.1,0.3-0.2,0.4-0.3c0.4-0.4,0.7-0.8,1-1.2c0,0,0.1-0.1,0.1-0.1l77-120.7l10.1,6.4L500.3,201.9z"></path> 
 

 
</svg>

Answer 2

另一種方法是動畫路徑數據本身。這在路徑所具有的頂點數量方面有明顯的限制。名單越長，它越難控制。反轉動畫意味着將值列表翻倍。爲了正確開始和結束，請將路徑元素上的d設置爲第一個/最後一個動畫值。

對於箭頭，它必須沿着它移動，並始終讓它指向正確的方向，您需要添加額外的中間動畫點。請注意，有中間keyTimes是加倍。

爲了讓動畫結尾處的所有內容都消失，只需在動畫持續時間內顯示箭頭。

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="250"> 
 
    <defs> 
 
    <marker orient="auto" refY="0" refX="0" id="tri" style="overflow:visible"> 
 
     <path d="M 1.76,0 -0.56,1.36 V -1.36 Z" fill="royalblue" /> 
 
    </marker> 
 
    </defs> 
 
    <path d="M 47,213 47,213 47,213 47,213" 
 
     fill="none" stroke="royalblue" stroke-width="14" 
 
     stroke-linejoin="round" marker-end="none"> 
 
    <animate attributeType="XML" attributeName="d" 
 
      begin="0s" dur="10s" fill="remove" 
 
      keyTimes="0;0.18;0.18;0.27;0.27;0.45;0.55;0.73;0.73;0.82;0.82;1" 
 
      values="M 47,213 47,213 47,213 47,213; 
 
        M 47,213 47,213 47,213 120,100; 
 
        M 47,213 120,100 120,100 120,100; 
 
        M 47,213 120,100 120,100 166,171; 
 
        M 47,213 120,100 166,171 166,171; 
 
        M 47,213 120,100 166,171 247,44; 
 
        M 47,213 120,100 166,171 247,44; 
 
        M 47,213 120,100 166,171 166,171; 
 
        M 47,213 120,100 120,100 166,171; 
 
        M 47,213 120,100 120,100 120,100; 
 
        M 47,213 47,213 47,213 120,100; 
 
        M 47,213 47,213 47,213 47,213" /> 
 
    <set attributeType="CSS" attributeName="marker-end" 
 
     begin="0s" dur="10s" to="url(#tri)" /> 
 
    </path> 
 
</svg>