如何动画沿路径填充SVG形状？ [重复]-Java 学习之路

这个问题在这里已有答案：

How to draw a fill svg? 3个答案
How to animate handwriting text on the web page using SVG? [closed] 2个答案

现在这几天是一个相当难的问题 .

我有一个我希望动画的SVG形状 - 也就是说，我希望它沿着特定的路径改变它的颜色 . 一个简单的形状看起来像这样：

single stroke

我的SVG中的形状表示构成汉字的笔画（汉字） - 该示例已从此处提取：

single character

以下是亮点：

必须在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形状？ [重复]

相关问题