给定路径的 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路径内容。

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

原文由 Ram 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您只需为 <stop> 中的 <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> 元素将突然变化的位置从箭头左侧 (offset=0) 移动到右侧 (offset=“1”)。

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

原文由 Paul LeBeau 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

基于 安德烈亚斯 的 回答。你可以用一个动画形状来覆盖你的箭头来揭开它。

 <svg id="svg_circle" width="450" height="400" viewBox='0 0 450 400'>
  <path class="path" stroke="#F0F0F0" fill="#fff"
    stroke-width="1" opacity="1" id="svg_1"
    d="m34.97813,21.70979l-33.55223,0.47088l-0.0394,
       -13.57138l34.2665,-0.47295l-0.0208,-7.14282
       l14.50618,14.42226l-14.95643,15.04345l-0.20382,
       -8.74944z">
   <animate id="project_anim1" attributeName="fill"
      from="#fff" to="#4DAF4C" begin="0s" dur="3s"
      fill="freeze" repeatCount="indefinite" />
  </path>
  <rect x="0" y="0" width="53" height="34" fill="#fff">
    <animate attributeType="XML" attributeName="x"
      from="0" to="53" begin="0s" dur="3s"
      repeatCount="indefinite" />
    <animate attributeType="XML" attributeName="width"
      from="53" to="0" begin="0s" dur="3s"
      repeatCount="indefinite" />
  </rect>
</svg>

原文由 Just a student 发布，翻译遵循 CC BY-SA 3.0 许可协议