如何为封闭的 svg 路径创建动画
How to create animation for closed svg path
我正在尝试创建用动画填充闭合路径的动画。
这是我创建封闭路径的 svg：
<path fill="#000000" stroke="none" d="M238.281,174.573C248.449,182.844,238.12900000000002,206.155,231.52,212.05700000000002C200.11100000000002,240.12900000000002,134.22500000000002,267.20000000000005,108.39800000000001,227.258C93.47600000000001,204.17600000000002,101.91600000000001,168.55100000000002,114.97200000000001,146.37900000000002C116.486,143.92800000000003,118.766,145.484,117.98500000000001,147.34000000000003C98.50600000000001,185.34800000000004,111.37400000000001,227.41400000000004,159.306,221.95900000000003C181.185,219.30900000000003,209.638,208.14600000000004,227.34500000000003,195.38700000000003C229.59600000000003,193.76600000000002,232.37400000000002,191.73100000000002,233.86100000000002,190.31900000000002C221.52700000000002,185.90500000000003,190.156,189.51800000000003,184.19600000000003,173.717C181.19100000000003,165.74800000000002,187.25300000000001,149.83,191.19300000000004,141.62300000000002C204.02500000000003,114.91400000000002,232.57500000000005,89.94700000000002,246.48100000000005,109.65000000000002C249.32800000000006,113.77500000000002,251.90800000000004,135.63600000000002,245.71600000000007,135.63600000000002C242.66200000000006,131.55800000000002,239.34900000000007,124.93700000000003,233.48900000000006,124.93700000000003C218.73600000000005,125.04100000000003,197.39800000000005,138.88800000000003,194.57300000000006,151.45700000000002H194.58900000000006C193.58000000000007,155.217,196.46800000000005,160.871,199.48800000000006,163.04300000000003C209.489,170.251,229.978,167.669,238.281,174.573Z" stroke-width="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);fill: #fff;stroke: #000;" data-svg="path"></path>
这是我的路径代码jsfiddle link。
现在我想用一种带有动画的颜色填充闭合路径，看起来像是一个渐进的填充，从路径的一个终点开始，在路径的另一点结束。
我们尝试使用 raphaeljs，但任何其他 js 库也可以。
感谢任何帮助。
正如罗伯特所说，线性渐变可能是一种方式。我只是要展示另一种可能是替代的方式。您可以通过使路径从需要绘图开始的点开始来改善效果。
你的例子与典型的路径进展相比的一个问题是你有一个可变的形状宽度，所以你不能做一些常用的技巧（比如 animatedasharray/offset）。其他一些方法也可能效果不佳，因为填充没有方向。线性渐变可能会有所帮助，但仍然存在问题。
另一种方法是制作剪辑或蒙版并为其设置动画。
在这个使用 Snap 的示例中，我们创建了一个完全相同的克隆元素的蒙版，找到长度，使笔划非常粗（因此多余的边框包含在蒙版中），然后将 stroke-dashoffset 设置为缓慢的动画划清界限。
它可以通过仅具有一个路径来改进，该路径是所需的单个笔划（而不是完全闭合的形状），并且还具有路径的起点，与所需的动画开始点相同。
var myPath = Snap('#myPath');
var myPathClone = myPath.clone().attr({ id: 'myPathClone' });
myPath.attr({ mask: myPathClone, fill: 'red' });
var myPathLength = myPathClone.getTotalLength();
myPathClone.attr({ fill: 'none', stroke: 'white', strokeWidth: 80, strokeDasharray: myPathLength + ' ' + myPathLength, strokeDashoffset: myPathLength, "stroke-linecap": 'round' });
myPathClone.animate({ strokeDashoffset: 0 }, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id="mySvg" height="600" version="1.1" width="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: absolute; left: 10px; top: 10px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.4</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path id="myPath" fill="#ff0000" stroke="none" d="M238.281,174.573C248.449,182.844,238.12900000000002,206.155,231.52,212.05700000000002C200.11100000000002,240.12900000000002,134.22500000000002,267.20000000000005,108.39800000000001,227.258C93.47600000000001,204.17600000000002,101.91600000000001,168.55100000000002,114.97200000000001,146.37900000000002C116.486,143.92800000000003,118.766,145.484,117.98500000000001,147.34000000000003C98.50600000000001,185.34800000000004,111.37400000000001,227.41400000000004,159.306,221.95900000000003C181.185,219.30900000000003,209.638,208.14600000000004,227.34500000000003,195.38700000000003C229.59600000000003,193.76600000000002,232.37400000000002,191.73100000000002,233.86100000000002,190.31900000000002C221.52700000000002,185.90500000000003,190.156,189.51800000000003,184.19600000000003,173.717C181.19100000000003,165.74800000000002,187.25300000000001,149.83,191.19300000000004,141.62300000000002C204.02500000000003,114.91400000000002,232.57500000000005,89.94700000000002,246.48100000000005,109.65000000000002C249.32800000000006,113.77500000000002,251.90800000000004,135.63600000000002,245.71600000000007,135.63600000000002C242.66200000000006,131.55800000000002,239.34900000000007,124.93700000000003,233.48900000000006,124.93700000000003C218.73600000000005,125.04100000000003,197.39800000000005,138.88800000000003,194.57300000000006,151.45700000000002H194.58900000000006C193.58000000000007,155.217,196.46800000000005,160.871,199.48800000000006,163.04300000000003C209.489,170.251,229.978,167.669,238.281,174.573Z" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);" data-svg="path"></path><image x="0" y="0" width="0" height="0" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="about:blank" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image><image x="0" y="0" width="0" height="0" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Raphaël’s object" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image></svg>
我正在尝试创建用动画填充闭合路径的动画。
这是我创建封闭路径的 svg：
<path fill="#000000" stroke="none" d="M238.281,174.573C248.449,182.844,238.12900000000002,206.155,231.52,212.05700000000002C200.11100000000002,240.12900000000002,134.22500000000002,267.20000000000005,108.39800000000001,227.258C93.47600000000001,204.17600000000002,101.91600000000001,168.55100000000002,114.97200000000001,146.37900000000002C116.486,143.92800000000003,118.766,145.484,117.98500000000001,147.34000000000003C98.50600000000001,185.34800000000004,111.37400000000001,227.41400000000004,159.306,221.95900000000003C181.185,219.30900000000003,209.638,208.14600000000004,227.34500000000003,195.38700000000003C229.59600000000003,193.76600000000002,232.37400000000002,191.73100000000002,233.86100000000002,190.31900000000002C221.52700000000002,185.90500000000003,190.156,189.51800000000003,184.19600000000003,173.717C181.19100000000003,165.74800000000002,187.25300000000001,149.83,191.19300000000004,141.62300000000002C204.02500000000003,114.91400000000002,232.57500000000005,89.94700000000002,246.48100000000005,109.65000000000002C249.32800000000006,113.77500000000002,251.90800000000004,135.63600000000002,245.71600000000007,135.63600000000002C242.66200000000006,131.55800000000002,239.34900000000007,124.93700000000003,233.48900000000006,124.93700000000003C218.73600000000005,125.04100000000003,197.39800000000005,138.88800000000003,194.57300000000006,151.45700000000002H194.58900000000006C193.58000000000007,155.217,196.46800000000005,160.871,199.48800000000006,163.04300000000003C209.489,170.251,229.978,167.669,238.281,174.573Z" stroke-width="1" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);fill: #fff;stroke: #000;" data-svg="path"></path>
这是我的路径代码jsfiddle link。
现在我想用一种带有动画的颜色填充闭合路径，看起来像是一个渐进的填充，从路径的一个终点开始，在路径的另一点结束。 我们尝试使用 raphaeljs，但任何其他 js 库也可以。
感谢任何帮助。
正如罗伯特所说，线性渐变可能是一种方式。我只是要展示另一种可能是替代的方式。您可以通过使路径从需要绘图开始的点开始来改善效果。
你的例子与典型的路径进展相比的一个问题是你有一个可变的形状宽度，所以你不能做一些常用的技巧（比如 animatedasharray/offset）。其他一些方法也可能效果不佳，因为填充没有方向。线性渐变可能会有所帮助，但仍然存在问题。
另一种方法是制作剪辑或蒙版并为其设置动画。
在这个使用 Snap 的示例中，我们创建了一个完全相同的克隆元素的蒙版，找到长度，使笔划非常粗（因此多余的边框包含在蒙版中），然后将 stroke-dashoffset 设置为缓慢的动画划清界限。
它可以通过仅具有一个路径来改进，该路径是所需的单个笔划（而不是完全闭合的形状），并且还具有路径的起点，与所需的动画开始点相同。
var myPath = Snap('#myPath');
var myPathClone = myPath.clone().attr({ id: 'myPathClone' });
myPath.attr({ mask: myPathClone, fill: 'red' });
var myPathLength = myPathClone.getTotalLength();
myPathClone.attr({ fill: 'none', stroke: 'white', strokeWidth: 80, strokeDasharray: myPathLength + ' ' + myPathLength, strokeDashoffset: myPathLength, "stroke-linecap": 'round' });
myPathClone.animate({ strokeDashoffset: 0 }, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<svg id="mySvg" height="600" version="1.1" width="800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: absolute; left: 10px; top: 10px;"><desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with Raphaël 2.1.4</desc><defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></defs><path id="myPath" fill="#ff0000" stroke="none" d="M238.281,174.573C248.449,182.844,238.12900000000002,206.155,231.52,212.05700000000002C200.11100000000002,240.12900000000002,134.22500000000002,267.20000000000005,108.39800000000001,227.258C93.47600000000001,204.17600000000002,101.91600000000001,168.55100000000002,114.97200000000001,146.37900000000002C116.486,143.92800000000003,118.766,145.484,117.98500000000001,147.34000000000003C98.50600000000001,185.34800000000004,111.37400000000001,227.41400000000004,159.306,221.95900000000003C181.185,219.30900000000003,209.638,208.14600000000004,227.34500000000003,195.38700000000003C229.59600000000003,193.76600000000002,232.37400000000002,191.73100000000002,233.86100000000002,190.31900000000002C221.52700000000002,185.90500000000003,190.156,189.51800000000003,184.19600000000003,173.717C181.19100000000003,165.74800000000002,187.25300000000001,149.83,191.19300000000004,141.62300000000002C204.02500000000003,114.91400000000002,232.57500000000005,89.94700000000002,246.48100000000005,109.65000000000002C249.32800000000006,113.77500000000002,251.90800000000004,135.63600000000002,245.71600000000007,135.63600000000002C242.66200000000006,131.55800000000002,239.34900000000007,124.93700000000003,233.48900000000006,124.93700000000003C218.73600000000005,125.04100000000003,197.39800000000005,138.88800000000003,194.57300000000006,151.45700000000002H194.58900000000006C193.58000000000007,155.217,196.46800000000005,160.871,199.48800000000006,163.04300000000003C209.489,170.251,229.978,167.669,238.281,174.573Z" stroke-width="0" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0); fill: rgb(255, 255, 255); stroke: rgb(0, 0, 0);" data-svg="path"></path><image x="0" y="0" width="0" height="0" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="about:blank" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image><image x="0" y="0" width="0" height="0" preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="Raphaël’s object" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></image></svg>