给定路径的 Svg 填充动画

Posted 2023-03-06

【中文标题】给定路径的 Svg 填充动画

【英文标题】：Svg fill animation for the given path

【发布时间】：2017-08-15 14:52:26

【问题描述】：

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

<svg id="svg_circle"   viewBox = '0 0 450 400'> 
    <g transform = "translate(0,0)"> 
      <path class="path" stroke="#F0F0F0" fill="#fff" stroke- 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路径内容。

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

【问题讨论】：

创建一个从左到右运行的线性渐变，将其应用到您的形状并为渐变停止设置动画。

【参考方案1】：

您可以通过在<linear gradient> 中为<stop>s 设置动画来做到这一点。

<svg id="svg_circle"   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- 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 动画库）。

【讨论】：

你能不能让箭头从上到下填充也需要帮助从下到上

@Ram 他当然可以，不过你为什么不尝试自己弄清楚呢。提示查看 linearGradient 元素上的 x1、y1、x2 和 y2 参数。 w3.org/TR/SVG/pservers.html#LinearGradients

了解 x1,x2 是什么，但我怎样才能实现它

这是您可以进行自己研究的地方。有很多网站解释了线性渐变的工作原理。你可以在 SVG 规范中read the section on linearGradient。

我的示例没有x1、y1 等的原因是因为这些属性的默认值恰好适用于从左到右的水平渐变。

【参考方案2】：

我认为fill 属性不可能做到这一点。但是，您可以将 SVG 路径反转为带有三角形孔的矩形。现在您只需要该路径后面的第二个元素，您可以在其中简单地在 x 方向上设置比例动画，以从左到右填充孔。

这是展示该技术的图片：

这是一个工作示例：

<svg   viewBox='0 0 450 400'>
  <rect x="0" y="0"   style="fill: black;" >
    <animateTransform attributeName="transform" type="scale" from="1 1" to="50 1" begin="0s" dur="2s" repeatCount="indefinite" />
  </rect>
  <path fill="#ffffff" d="M0,0v29.8h86V0H0z M6.5,25V5.5L48.8,25H6.5z"/>
</svg>

注意：答案已从三角形更新为箭头，我不会更新我的答案，因为每种形状的技术都是相同的。

【讨论】：

你能帮我做其他事情吗，你如何创建 SVG，意味着使用什么工具。值，数字 - 你如何剪辑，填充什么？除了 PhotoShop/Illustrator

还有什么

是的，您可以简单地使用Inkscape - 它是开源的，一旦您熟悉了这些工具，它就会非常强大！

【参考方案3】：

以andreas'answer 为基础。您可以使用动画形状来遮盖箭头。

<svg id="svg_circle"   viewBox='0 0 450 400'> 
  <path class="path" stroke="#F0F0F0" fill="#fff"
    stroke- 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"   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>