Question

现在这是一个相当难的问题。

我有一个我希望动画的SVG形状 - 也就是说，我想让它沿着特定的路径改变它的颜色。简单的形状如下所示：

我的SVG中的形状代表构成汉字的笔画（汉字） - 这个例子是从这里提取的：

以下是重点：

必须在SVG上完成（我需要可扩展性）。
每个形状都由一条路径绑定并填充颜色。
大多数SVG都有多种形状，通常相互交叉。
形状没有恒定的宽度。
每个形状都有一条专用路径/笔划引导它的方向。
每个形状都必须按顺序进行动画处理。
动画应该有一个恒定的速度（我觉得不同的元素大小有点棘手）。

到目前为止，我的研究表明，使用填充变换不适用于这样的形状：

<html>
<body>
<head>
</head>

<div style="display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">
<div style="width: 100%; height: 100%; position: relative;">  
<svg
   xmlns="http://www.w3.org/2000/svg"
   width="38.639015mm"
   height="80.743088mm"
   viewBox="0 0 38.639015 80.743087"
   id="svg831">
  <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>
  <g
     id="layer1"
     transform="translate(-103.9336,-77.49032)">
    <g
       transform="matrix(0.35277777,0,0,-0.35277777,55.696164,149.58928)"
       id="g823">
      <path
         style="fill:url(#left-to-right);stroke:none;stroke-width:0.99999994"
         d="m 139.73604,123.37501 c 1.33299,-40.000002 5.667,-67.333302 12.99999,-82.000002 2.06847,-4.338361 2.99033,-6.799913 6,-12.000001 16.66701,-25.999995 36.667,-42.333293 60,-48.999998 23.33301,-6.66669 31.83301,-6.499995 25.50001,0.50001 -6.333,6.99999 -8.5,26.499998 -6.50001,58.499986 h -3.99999 l -8.00001,-43.999988 c -22,7.33332 -40.66699,21.99999 -55.99999,43.999988 -1.77033,3.225113 -4.43601,9.376455 -6,15 -4.66701,11.333303 -7.66701,34.333306 -9,69.000005 v 5 c -0.667,21.333 -1,40.333 -1,57 l 9,7 -26,12 c 0.66699,-14 1.667,-39.333 3,-76"
         id="my_path" />
    </g>
  </g>
</svg>
</div>
</div>
</body>
</html>

我也考虑了剪切路径，但我不确定如何实际地沿另一个对象剪切/解开一个对象，以便不剪切相邻的笔划。其他一些解决方案需要大量的手工修改，我需要避免由于我想要处理的数据量。

编辑：我必须编辑这个问题，因为它在我看来是错误的 - 标记为重复，因为我明确说明了我的限制（另一个问题已经通过将所有内容转换为笔画来解决）。

如何动画沿路径填充SVG形状？

0 个答案: