给定路径的SVG填充动画

Question

我正在尝试从左到右制作箭头动画，箭头路径的代码如下所示：

<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'>

    <g transform = "translate(0,0)">

      <path class="path" stroke="#F0F0F0" fill="#fff" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1">

          <animate id="project_anim1" attributeName="fill" from="#fff" to="#4DAF4C" begin="1s" dur="1s" fill="freeze" repeatCount="1"></animate>

      </path>

    </g>

</svg>

以上是我的箭头的svg路径内容。

有人可以帮助我如何从左到右填充路径。等待快速响应

Answer 1

您可以通过仅对中的<stop>s设置动画来完成此操作<linear gradient>。

<svg id="svg_circle" width="100%" height="100%" viewBox = '0 0 450 400'>



  <defs>

    <linearGradient id="left-to-right">

      <stop offset="0" stop-color="#4DAF4C">

        <animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />

      </stop>

      <stop offset="0" stop-color="#fff">

        <animate dur="2s" attributeName="offset" fill="freeze" from="0" to="1" />

      </stop>



    </linearGradient>

  </defs>



  <path class="path" stroke="#F0F0F0" fill="url(#left-to-right)" stroke-width="1" opacity="1" d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,-13.57138l34.2665,-0.47295l-0.0208,-7.14282l14.50618,14.42226l-14.95643,15.04345l-0.20382,-8.74944z" id="svg_1" />

</svg>

这是如何工作的，我们有一个线性梯度表示从绿色到白色的突然变化。所述<animation>元件移动位置，即突然变化，从左边的箭头（偏移=
0）到右侧的（偏移量=“1”）。

请注意，SVG <animate>元素在IE中不起作用。如果需要支持IE，则需要使用FakeSmile库或使用其他方法（例如JS动画库）。