Javascript 如何沿路径设置填充SVG形状的动画？_Javascript_Css_Animation_Svg

Javascript 如何沿路径设置填充SVG形状的动画？

javascript css animation svg

Javascript 如何沿路径设置填充SVG形状的动画？,javascript,css,animation,svg,Javascript,Css,Animation,Svg,这对现在的几天来说是个难题我有一个SVG的形状，我想动画-即，我希望它改变它的颜色沿特定的路径。一个简单的形状如下所示：我的SVG中的形状表示构成汉字（汉字）的笔划-示例摘自：以下是要点：它必须在SVG上完成（我需要可伸缩性）每个形状都由一条路径绑定并用颜色填充大多数SVG将具有多个形状，通常彼此相交这些形状的宽度不是恒定的每个形状都有一个专用的路径/笔划来引导其方向每个形状都必须按顺序设置动画动画应该有一个恒定的速度（我认为对于不同的元素大小来说这有点棘手）到目前为止

这对现在的几天来说是个难题

我有一个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>

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

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

然而，我想到了一个潜在的解决方案，但我不确定如何继续：我可以使我的红色笔划如此粗大，以至于它比我的形状更宽，然后应用一个与我的形状坐标完全相同的剪切路径-然后它就足以为红色笔划设置动画。但是单独的对象可以有非求和的剪切路径吗？

Sphinxxx我不同意-这些限制对于我的问题是唯一的。你仍然可以使用与中相同的技术，使用剪切笔划。不过，每个路径只需要一次笔划。哦，所以我的最后一个想法是正确的——那么，我的观点是正确的。我感谢你们的例子，它确实解决了我的问题：）