使用 Snap Svg 在一个函数中为两条路径设置动画

Question

我需要一些帮助，我正在尝试使用 Snap svg 在一个函数中为两条路径设置动画。

我正在尝试这个，但它不起作用，只需为第一个设置动画。

    svg = document.getElementById('Capa_1_plato');
s = Snap(svg);
var path = Snap.select('#ondas');
var path2 = Snap.select('#ondasAceite');
animatePath();
function animatePath(){
  path.animate({ d: "M520.5 132.6c4.4 1.5 11.3 3.3 19.9 3.1 7.7-.1 11.3-3.5 19.4-3.6 6.6-.1 12 1.6 15.4 3"}, 2000, mina.linear, resetPath);
  path2.animate({ d: "M219.6 153.2c.5-.2 1.5-.6 2.3-.6 1.4 0 2 .2 2.8.6.9.4 2 .9 4 .8 2 0 3.1-.5 4-1 .8-.3 1.4-.6 2.8-.6s2 .2 2.8.6c.9.4 2 .9 4 .8s3.1-.5 4-1c.8-.3 1.4-.6 2.8-.6.9 0 1.4.1 1.9.3.1 0 .7.2.8 0 1.1-2 .5-2.8.5-2.8-.8-.3-1.7-.5-3-.5-2 0-3.1.5-4 1-.8.3-1.4.6-2.8.6s-2-.2-2.8-.6c-.9-.4-2-.9-4-.8-2 0-3.1.5-4 1-.8.3-1.4.6-2.8.6s-2-.2-2.8-.6c-.9-.4-2-.9-4-.8-1.3 0-2.5.4-3.2.7-.8 1.6.7 2.9.7 2.9z"}, 2000, mina.linear, resetPath);
}
function resetPath(){
    path.animate({ d: "M519.5 135.3c4.4-1.5 11.3-3.3 19.9-3.1 7.7.1 11.3 3.5 19.4 3.6 6.6.1 12-1.6 15.4-3" }, 2000, mina.linear, animatePath);
  path2.animate({ d: "M219.6 150.4c.5.2 1.5.6 2.3.6 1.4 0 2-.2 2.8-.6.9-.4 2-.9 4-.9s3.1.5 4 .9c.8.3 1.4.6 2.8.6s2-.2 2.8-.6c.9-.4 2-.9 4-.9s3.1.5 4 .9c.8.3 1.4.6 2.8.6.9 0 1.4-.1 1.9-.3.1 0 .7-.2.8 0 1.2 2 .5 2.8.5 2.8-.8.3-1.7.5-3 .5-2 0-3.1-.5-4-.9-.8-.3-1.4-.6-2.8-.6s-2 .2-2.8.6c-.9.4-2 .9-4 .9s-3.1-.5-4-.9c-.8-.3-1.4-.6-2.8-.6s-2 .2-2.8.6c-.9.4-2 .9-4 .9-1.3 0-2.5-.4-3.2-.7-.8-1.7.7-2.9.7-2.9z"}, 2000, mina.linear, resetPath);
}

而 HTML 是：

<svg id="Capa_1_plato" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 780 1374">
<path id="ondas" stroke="#fff" stroke-width="4" d="M519.5 135.3c4.4-1.5 11.3-3.3 19.9-3.1 7.7.1 11.3 3.5 19.4 3.6 6.6.1 12-1.6 15.4-3"/>
<path id="#ondasAceite" class="st2" d="M219.6 150.4c.5.2 1.5.6 2.3.6 1.4 0 2-.2 2.8-.6.9-.4 2-.9 4-.9s3.1.5 4 .9c.8.3 1.4.6 2.8.6s2-.2 2.8-.6c.9-.4 2-.9 4-.9s3.1.5 4 .9c.8.3 1.4.6 2.8.6.9 0 1.4-.1 1.9-.3.1 0 .7-.2.8 0 1.2 2 .5 2.8.5 2.8-.8.3-1.7.5-3 .5-2 0-3.1-.5-4-.9-.8-.3-1.4-.6-2.8-.6s-2 .2-2.8.6c-.9.4-2 .9-4 .9s-3.1-.5-4-.9c-.8-.3-1.4-.6-2.8-.6s-2 .2-2.8.6c-.9.4-2 .9-4 .9-1.3 0-2.5-.4-3.2-.7-.8-1.7.7-2.9.7-2.9z"/>
</svg>

Answer 1

我认为您的 ID 有错别字。你有

<path id="#ondasAceite" ...

将其更改为

<path id="ondasAceite" ...

使用 Snap Svg 在一个函数中为两条路径设置动画

Animate two paths in one function with Snap Svg

animation

svg

snap.svg