svg画像がうねうね動くコンテンツを複数作成したい(2個目以降のコンテンツにjsが効かない)

Question

前提・実現したいこと

svg画像がうねうね動くコンテンツを複数作成したいのです。
コンテンツが1つの時はうまく動いたのですが
コンテンツを複数に増やすと2個目以降は上手くうねうね動きません・・・。

元々コンテンツ1つの時は
<svg>のなかの<path>タグの名前は id="js-svg-body"のようにidで指定していましたが
複数に適用させるためclassに変更しています。

どのように指定すれば2つ目以降も同様のjsを適用できるでしょうか？？

codepenにもソースコードを載せています。
https://codepen.io/lisaaaan/pen/poJdxqZ

該当のソースコード

【複数で2個目以降が動かないバージョン】

<div class="wrap">
<svg id="test" width="750" height="400">
    <path x="0" y="0" class="js-svg-body" d="M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z"/>
</div>

<div class="wrap">
<svg id="test" width="750" height="400">
    <path x="0" y="0" class="js-svg-body" d="M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z"/>
</div>
  
<div class="wrap">
<svg id="test" width="750" height="400">
    <path x="0" y="0" class="js-svg-body" d="M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z"/>
</div>

let $svgBody = Snap('.js-svg-body'),
    path =['M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z',

'M646.924 390.1c-53.039-5.959-83.193-4.684-107.079 0-85.225 16.715-190.888 8.9-293.215 1-59.013-4.557-87.085-4.1-148.3 5.892-30.836 5.033-86.8-23.782-85.392-76.446 1.517-56.58-13.494-93.329-3.124-150.77C13.817 147.625-2.91 90.5.449 78.23 12.945 32.574 51.9 15.319 103.541 23.251c54.023 8.3 112.066 1.344 180.116-17.527C372.881-19.019 475.77 45.83 548.852 23.6 610.9 4.731 673.718 6.706 702.965 21.616c18.745 9.555 25.5 18.161 33.025 48.668C748 118.952 750 159.674 750 203.376c0 64.123-1.289 78.037-10.007 122.167-10.008 50.657-54.385 68.907-93.069 64.557z',
           
'M653.667 391.333c-52.723 8.487-79.008 8.146-114.167.716-85.046-17.972-190.864-6.4-293.248 1.012-88.639 6.418-146.646 9.473-181.65 4.382-30.933-4.5-56.006-18.33-52.063-76.228 3.633-53.342 25.516-86.246 2.058-140.674C4.777 157.757.446 87.413.044 74.463-1.4 27.793 33.058 24.889 84.6 20.665 138.623 16.237 215.619-3.775 283.284.629c92.412 6.014 194.364 13.926 265.224 18.2 64.745 3.911 81.191-4.5 136.163-9.371 20.963-1.857 61.017 25.576 58.006 59.063-4.57 50.833-30 90.653-10 131.363 28.693 58.4 17 124.235-1 145.619-33.608 39.927-41.93 40.021-78.01 45.83z'], 
    
    SPEED =1500, 
    EASING = mina.linear, 
    i = 0; 




function AnimationSvg(){
  
  $svgBody.animate({d: path[i] },SPEED,EASING,AnimationSvg);
  
  i++;
  
  if(i === path.length){
    i = 0; 
  }
}

AnimationSvg();

【1つで動くバージョン】

<div class="wrap">
<svg id="test" width="750" height="400">
    <path x="0" y="0" id="js-svg-body" d="M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z"/>
</svg>
</div>

let $svgBody = Snap('#js-svg-body'),
    path =['M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z',

'M646.924 390.1c-53.039-5.959-83.193-4.684-107.079 0-85.225 16.715-190.888 8.9-293.215 1-59.013-4.557-87.085-4.1-148.3 5.892-30.836 5.033-86.8-23.782-85.392-76.446 1.517-56.58-13.494-93.329-3.124-150.77C13.817 147.625-2.91 90.5.449 78.23 12.945 32.574 51.9 15.319 103.541 23.251c54.023 8.3 112.066 1.344 180.116-17.527C372.881-19.019 475.77 45.83 548.852 23.6 610.9 4.731 673.718 6.706 702.965 21.616c18.745 9.555 25.5 18.161 33.025 48.668C748 118.952 750 159.674 750 203.376c0 64.123-1.289 78.037-10.007 122.167-10.008 50.657-54.385 68.907-93.069 64.557z',
           
'M653.667 391.333c-52.723 8.487-79.008 8.146-114.167.716-85.046-17.972-190.864-6.4-293.248 1.012-88.639 6.418-146.646 9.473-181.65 4.382-30.933-4.5-56.006-18.33-52.063-76.228 3.633-53.342 25.516-86.246 2.058-140.674C4.777 157.757.446 87.413.044 74.463-1.4 27.793 33.058 24.889 84.6 20.665 138.623 16.237 215.619-3.775 283.284.629c92.412 6.014 194.364 13.926 265.224 18.2 64.745 3.911 81.191-4.5 136.163-9.371 20.963-1.857 61.017 25.576 58.006 59.063-4.57 50.833-30 90.653-10 131.363 28.693 58.4 17 124.235-1 145.619-33.608 39.927-41.93 40.021-78.01 45.83z'],
    
    SPEED =1500,
    EASING = mina.linear, 
    i = 0; 

function AnimationSvg(){
  
  $svgBody.animate({d: path[i] },SPEED,EASING,AnimationSvg);
 
  i++;
  
  if(i === path.length){
    i = 0; 
  }
}


AnimationSvg();

Comments

[yambejp]

とりあえず、一つで動くバージョンを例示ください

[lisaaaan]

コメントありがとうございます！
【1つで動くバージョン】の追記行いました。
もしわかることがありましたらお教えいただけますと助かります！

Answer 1

ちょっと微妙ですが

• codepen

Comments

[oikashinoa]

yambejpさん(初回投稿時呼び捨てになってました。ごめんなさい)のがほぼ正解なきがしてきました。

複数のSVGタグ、1つのpathがある時
1.複数(arrayとか)のsvgがあるときは、snap()はsetを返す http://snapsvg.io/docs/#Snap
2.set.forEachでぐるぐる回せる http://snapsvg.io/docs/#Set.forEach

1つのSVGタグ、複数のpathがある時
1.s=snap(”#idなどで指定”)
2.s.selectAll(query)で複数指定 http://snapsvg.io/docs/#Element.selectAll

…みたいに読めた。

[lisaaaan]

yambejpさん、ありがとうございます！おお！3つとも動いてますね！！

oikashinoaさんも、さらなる丁寧な解説ありがとうございますm(_ _)m

ただちょっと動きが滑らかでなくなってしまうのはなぜなんでしょうね…。
元のデータ通りvar SPEED =1500;とすると微かに動く感じになっちゃいますもんね。

頂いたお二方の回答を元に、動きが滑らかになるか自分でもいじって実験してみます。
せっかくゴールが見えてきたので、しつこいですがこちらの投稿引き続き動きを滑らかにするアンサー募集させて頂きますm(_ _)m

解決できる方いましたらお教えいただければと思います！！

[oikashinoa]

svg.jsのほうが軽いとか。他のライブラリーも検討したほうが良いと思います。

Answer 2

コメント頂いた方ありがとうございます。

どこかが競合しているのかなと思い、自分でも色々実験してみましたがスムーズには動かず…

最終手段ですが、結局pathだけまとめて、それぞれバラバラに指定することにしました。

var pathD01 = 'M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z';

var pathD02 = 'M646.924 390.1c-53.039-5.959-83.193-4.684-107.079 0-85.225 16.715-190.888 8.9-293.215 1-59.013-4.557-87.085-4.1-148.3 5.892-30.836 5.033-86.8-23.782-85.392-76.446 1.517-56.58-13.494-93.329-3.124-150.77C13.817 147.625-2.91 90.5.449 78.23 12.945 32.574 51.9 15.319 103.541 23.251c54.023 8.3 112.066 1.344 180.116-17.527C372.881-19.019 475.77 45.83 548.852 23.6 610.9 4.731 673.718 6.706 702.965 21.616c18.745 9.555 25.5 18.161 33.025 48.668C748 118.952 750 159.674 750 203.376c0 64.123-1.289 78.037-10.007 122.167-10.008 50.657-54.385 68.907-93.069 64.557z';

var pathD03 = 'M653.667 391.333c-52.723 8.487-79.008 8.146-114.167.716-85.046-17.972-190.864-6.4-293.248 1.012-88.639 6.418-146.646 9.473-181.65 4.382-30.933-4.5-56.006-18.33-52.063-76.228 3.633-53.342 25.516-86.246 2.058-140.674C4.777 157.757.446 87.413.044 74.463-1.4 27.793 33.058 24.889 84.6 20.665 138.623 16.237 215.619-3.775 283.284.629c92.412 6.014 194.364 13.926 265.224 18.2 64.745 3.911 81.191-4.5 136.163-9.371 20.963-1.857 61.017 25.576 58.006 59.063-4.57 50.833-30 90.653-10 131.363 28.693 58.4 17 124.235-1 145.619-33.608 39.927-41.93 40.021-78.01 45.83z';


/*----------------------------------------*/

let $svgBody = Snap("#test01 path"),
    path =[pathD01,pathD02,pathD03],
    SPEED =1500, 
    EASING = mina.linear,
    i = 0;

function AnimationSvg(){
  $svgBody.animate({d: path[i] },SPEED,EASING,AnimationSvg);
  i++;
  if(i === path.length){ i = 0; }
}

AnimationSvg();

/*----------------------------------------*/

let $svgBody02 = Snap("#test02 path"),
    path02 =[pathD01,pathD02,pathD03],
    SPEED02 =1500, 
    EASING02 = mina.linear, 
    i02 = 0; 

function AnimationSvg02(){
  
  $svgBody02.animate({d: path02[i02] },SPEED02,EASING02,AnimationSvg02);
  i02++;
  if(i02 === path02.length){ i02 = 0; }
}

AnimationSvg02();

/*----------------------------------------*/

let $svgBody03 = Snap("#test03 path"),
    path03 =[pathD01,pathD02,pathD03],
    SPEED03 =1500, 
    EASING03 = mina.linear,
    i03 = 0; 

function AnimationSvg03(){
  $svgBody03.animate({d: path03[i03] },SPEED03,EASING03,AnimationSvg03);
  i03++;
  if(i03 === path03.length){ i03 = 0; }
}

AnimationSvg03();

/*----------------------------------------*/

参考codepenURL:
https://codepen.io/lisaaaan/pen/BaNxbpj

色々とアドバイスいただきありがとうございました。
とても勉強になりました。

もっといいやり方あるよ！というのがあれば
お教えいただけたら幸いです。

Answer 3

残作業

svgタグにclassを書いて(pathはHTLMElemntじゃ無いはず)、let ds = document.querySelectorAll("svg.js-svg-body");すれば行ける気がする

時間切れなので後はやって下さい

途中結果

</svg>で閉じて、idはTest,1,2にする
？Pathのclass書けるんでしたっけ？

<div class="wrap">
    <svg id="test" width="750" height="400">
        <path x="0" y="0" class="js-svg-body" d="M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z" />
    </svg>
</div>

<div class="wrap">
    <svg id="test1" width="750" height="400">
        <path x="0" y="0" class="js-svg-body" d="M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z" />
    </svg>
</div>

<div class="wrap">
    <svg id="test2" width="750" height="400">
        <path x="0" y="0" class="js-svg-body" d="M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z" />
    </svg>
</div>

Snap.svg API Referenceではarrayや
CSS query selectorを受け付けると書いてあったけど、今の所1つしか動かせなかった。
でもds[1]だと2番目が動かせることまでは分かりました。後は誰かよろしく

let ds = document.querySelectorAll("svg path");
// let $svgBody = Snap(ds[1]), //2つ目が動く
// let $svgBody = Snap(ds), //Arrayで渡すとダメ？NodeListではない
// let $svgBody = Snap(Array.from(ds)), //NodeListではないけど念の為配列化
// let $svgBody = Snap([...ds]), //NodeListではないけど念の為配列化
let $svgBody = Snap("svg path"), //1つ目が動く
    path =['M653.452 394.933c-18.731 4.276-60.67-5.921-84.289-11.759-88.179-21.8-236.886-19.2-338.194 6.414-67.639 17.1-98.764 8.775-132.156 5.345C67.6 391.726.157 369.306 13.484 317.965c20.812-80.175 5.657-125.213-3.121-151.8C3.259 144.656-2.359 111.177 1 98.821c12.487-45.967 54.55-60.744 103.019-80.175 42.665-17.1 106.141-21.38 148.806-17.1 84.9 8.509 192.541 51.993 262.23 21.38C558.855 3.68 646.078 5.773 675.3 20.784c18.731 9.621 74.923 35.277 63.477 94.072-5.211 26.763-9.366 78.037 1.04 103.692 8.5 20.969 12.931 75.144 8.325 94.072-12.483 51.312-56.763 73.655-94.69 82.313z',

'M646.924 390.1c-53.039-5.959-83.193-4.684-107.079 0-85.225 16.715-190.888 8.9-293.215 1-59.013-4.557-87.085-4.1-148.3 5.892-30.836 5.033-86.8-23.782-85.392-76.446 1.517-56.58-13.494-93.329-3.124-150.77C13.817 147.625-2.91 90.5.449 78.23 12.945 32.574 51.9 15.319 103.541 23.251c54.023 8.3 112.066 1.344 180.116-17.527C372.881-19.019 475.77 45.83 548.852 23.6 610.9 4.731 673.718 6.706 702.965 21.616c18.745 9.555 25.5 18.161 33.025 48.668C748 118.952 750 159.674 750 203.376c0 64.123-1.289 78.037-10.007 122.167-10.008 50.657-54.385 68.907-93.069 64.557z',
           
'M653.667 391.333c-52.723 8.487-79.008 8.146-114.167.716-85.046-17.972-190.864-6.4-293.248 1.012-88.639 6.418-146.646 9.473-181.65 4.382-30.933-4.5-56.006-18.33-52.063-76.228 3.633-53.342 25.516-86.246 2.058-140.674C4.777 157.757.446 87.413.044 74.463-1.4 27.793 33.058 24.889 84.6 20.665 138.623 16.237 215.619-3.775 283.284.629c92.412 6.014 194.364 13.926 265.224 18.2 64.745 3.911 81.191-4.5 136.163-9.371 20.963-1.857 61.017 25.576 58.006 59.063-4.57 50.833-30 90.653-10 131.363 28.693 58.4 17 124.235-1 145.619-33.608 39.927-41.93 40.021-78.01 45.83z'], //変形されたpathを用意する
    
    SPEED =1500, //アニメーションのスピード調整
    EASING = mina.linear, //snap.svgに用意されているeasing
    i = 0; //最初にはじまるpathを定義



//アニメーションの関数
function AnimationSvg(){
  
  //パスを定義して１秒間動かした後にアニメーションが繰り返される
  $svgBody.animate({d: path[i] },SPEED,EASING,AnimationSvg);
  
  //pathの順番をつけかえ
  i++;
  
  //もしpathの付け替えで多くなってしまった時初めのかたちに戻る
  if(i === path.length){
    i = 0; //初めのpathに戻る
  }
}

//アニメーションスタート
AnimationSvg();



/*-------------------- 

【見本】CodePen Home
Snap svg Animation - Click Action
A PEN BY Kayoko Hayashi


let $svg = $('#js-svg'), //全体を定義
    $svgMouth = Snap('#js-svg-mouth'), //動かしたい場所を定義
    pathStart = 'M37.9,61.4c-3.8-0.2-7.1-1.6-9.9-4.2c-0.8-0.7-1.5-1.7-0.5-2.7c0.8-0.8,1.7-0.4,2.5,0.1c2.5,1.8,5.1,2.9,7.7,3.1c2.6,0.2,5.2-0.6,7.8-2.6c0.7-0.6,1.7-0.9,2.5,0c0.7,0.9,0.1,1.7-0.6,2.4C44.7,60,41.6,61.4,37.9,61.4z', //戻した時のpath
    pathEnd ='M36.9,57.4c-3.8-0.2-6.1,2.4-8.9-0.2c-0.8-0.7-1.5-1.7-0.5-2.7c0.8-0.8,1.7-0.4,2.5,0.1c2.5,1.8,4.1-1.1,6.7-0.9c2.6,0.2,6.2,3.4,8.8,1.4c0.7-0.6,1.7-0.9,2.5,0c0.7,0.9,0.1,1.7-0.6,2.4C44.7,60,40.6,57.4,36.9,57.4z', //動かした後のpath
    SPEED = 100, //動く速さ,
    EASING = mina.easeout; //snap.svgに用意されているeasing

//クリッックイベント
$svg.on('click',(e) =>{
  
  //is-activeが付いてるときremoveして元のpathに戻す
  if($(e.currentTarget).hasClass('is-active')){
   $(e.currentTarget).removeClass('is-active');
   $svgMouth.animate({d:pathStart},SPEED,EASING);
  } 
  
  //is-activeが付いてるなかった時is-activeつけてpathを動かす
  else {
    $(e.currentTarget).addClass('is-active');
    $svgMouth.animate({d:pathEnd},SPEED,EASING);
  }
  
});
--------------------*/

Comments

[lisaaaan]

早速回答いただきましてありがとうございます。

頂いた回答を元に以下を実行しました。
①【HTML】</svg>で閉じて、idはTest,1,2にする、svgタグにclassを書く
②【js】let ds = document.querySelectorAll("svg.js-svg-body");する

【HTML】
<div class="wrap">
<svg id="test1" class="js-svg-body" width="750" height="400">
<path x="0" y="0" d=…(以下略)

【js】
let ds = document.querySelectorAll("svg.js-svg-body");
let $svgBody = Snap("svg path"),
path =…(以下略)

という形に直してみましたが、やはり1番目だけが動き
2番目以降は動かないままのようです…。

codepenここまでの途中経過
https://codepen.io/lisaaaan/pen/poJdxqZ

ds[1]だと2番目が動かせるなども教えて頂いたので
本日もうちょっとイジって実験してみます！

もしまた追加でわかったことなどあればお教えいただけますと助かりますm(_ _)m