如何为此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

另一种方法是为路径数据本身设置动画。这在路径具有的顶点数量方面有明显的局限性。列表越长，它就越难以管理。反转动画意味着将值列表加倍。要正确开始和结束，请将路径元素本身的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>

Answer 2

您可以更改渐变，使其从左到右，而不是从下到上。也许这足以满足您的需求？

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>