给定路径的 Svg 填充动画 [英] Svg fill animation for the given path

问题描述

我正在尝试从左到右为箭头设置动画.我的箭头路径代码如下:

I am trying to animate an arrow from left to right.The code of my arrow's path is given below:

<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路径内容.

The above is the svg path content of my arrow.

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

Kindly anyone help me how to fill the path from left to right. Waiting for quick response

推荐答案

您只需在 中为 设置动画即可实现此目的>.

You can do this by just animating the <stop>s in a <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>

这是如何工作的，我们有一个线性渐变表示从绿色到白色的突然变化. 元素将突然变化的位置从箭头的左侧 (offset=0) 移动到右侧 (offset="1").

How this works is that we have a linear gradient representing an abrupt change from green to white. The <animation> elements move the position, of that abrupt change, from the left of the arrow (offset=0) to the right (offset="1").

请注意，SVG 元素在 IE 中不起作用.如果您需要支持IE，则需要使用FakeSmile 库或使用其他方法(例如JS 动画库).

Note that SVG <animate> elements will not work in IE. If you need to support IE, you will need to use the FakeSmile library or use a different method (such as a JS animation library).

这篇关于给定路径的 Svg 填充动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！