vivus.jsのError

svgアニメーションを操作するvivus.jsを使ってjsファイルに書き込んだんですが、開発ツールにて

vivus.min.js:1 Uncaught Error: Vivus [constructor]: "element" parameter is not related to an existing ID

と出て来ました。
下記サイトを参考に、
https://teratail.com/questions/95264

if ( $('#layer').length ) {}

の中で

new Vivus

としましたが、うまくいきません。
以下がソースになります。
どこが原因でしょうか。
よろしくお願いします。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="./vivus.min.js"></script>
<script>
if ( $('#layer').length ) {
   new Vivus('layer', { duration: 100 , start: 'autostart', pathTimingFunction: Vivus.EASE_OUT,}, function(obj){
   obj.el.classList.add('done');
   });
}
</script>
</head>
<style>
path {
 fill-opacity: 0;
 transition: fill-opacity 0.5s;
}
.done .cls-1 {
 fill: #333333;
 fill-opacity: 1;
}
.done .cls-2 {
 fill: #444444;
 fill-opacity: 1;
}
.done .cls-3 {
 fill: #555555;
 fill-opacity: 1;
}
.done .cls-4 {
 fill: #666666;
 fill-opacity: 1;
}
.done path {
 stroke: none;
}
</style>
<body>
<svg id="layer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 203 60.98">
   <defs>
   </defs>
   <title>アセット 2</title>
   <g id="レイヤー_2" data-name="レイヤー 2">
   <g id="レイヤー_1-2" data-name="レイヤー 1">
   <path class="cls-1" fill="none" stroke="#000" d="M46.82,1.69V11.92H29.53V59.48H17.37V11.92H0V1.69Z"/>
   <path class="cls-2" fill="none" stroke="#000" d="M96.62,11.92H66V24.19H94.11v10H66V49.09H98V59.48H54.23V1.69H96.62Z"/>
   <path class="cls-3" fill="none" stroke="#000" d="M116.15,41.64a11.61,11.61,0,0,0,2.2,5.92q3,3.57,10.29,3.57a22,22,0,0,0,7.08-.94c3.45-1.2,5.17-3.44,5.17-6.7a4.94,4.94,0,0,0-2.53-4.43,27.29,27.29,0,0,0-8-2.71L124.08,35q-9.22-2-12.68-4.43-5.84-4-5.84-12.51a16.6,16.6,0,0,1,5.71-12.9Q117,0,128.07,0a25.71,25.71,0,0,1,15.77,4.84q6.54,4.85,6.85,14.06H139.08a8.24,8.24,0,0,0-4.66-7.41A15.93,15.93,0,0,0,127.23,10a13.74,13.74,0,0,0-7.64,1.88,6,6,0,0,0-2.86,5.25,5,5,0,0,0,2.82,4.63,34.5,34.5,0,0,0,7.68,2.39l10.14,2.4q6.67,1.56,10,4.19,5.16,4.08,5.16,11.8a16.58,16.58,0,0,1-6.12,13.16Q140.29,61,129.11,61q-11.42,0-18-5.16t-6.54-14.18Z"/>
   <path class="cls-4" fill="none" stroke="#000" d="M203,1.69V11.92H185.71V59.48H173.55V11.92H156.18V1.69Z"/>
   </g>
   </g>
</svg>
</body>
</html>

行動規範の内容に同意します

回答1件

ベストアンサー

if ( $('#layer').length ) {}は
onload時にしないといけないですね(でないとタグ読み込めてないので判定できない)

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width, initial-scale=1.0">
6<meta http-equiv="X-UA-Compatible" content="ie=edge">
7<title>Document</title>
8<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
9<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js"></script>
10<script>
11$(function(){
12    if ( $('#layer').length ) {
13        new Vivus('layer', { duration: 100 , start: 'autostart', pathTimingFunction: Vivus.EASE_OUT,}, function(obj){
14        obj.el.classList.add('done');
15        });
16    }
17});
18</script>
19</head>
20<style>
21path {
22  fill-opacity: 0;
23  transition: fill-opacity 0.5s;
24}
25.done .cls-1 {
26  fill: #333333;
27  fill-opacity: 1;
28}
29.done .cls-2 {
30  fill: #444444;
31  fill-opacity: 1;
32}
33.done .cls-3 {
34  fill: #555555;
35  fill-opacity: 1;
36}
37.done .cls-4 {
38  fill: #666666;
39  fill-opacity: 1;
40}
41.done path {
42  stroke: none;
43}
44</style>
45
46<body>
47<svg id="layer" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 203 60.98">
48    <defs>
49    </defs>
50    <title>アセット 2</title>
51    <g id="レイヤー_2" data-name="レイヤー 2">
52    <g id="レイヤー_1-2" data-name="レイヤー 1">
53    <path class="cls-1" fill="none" stroke="#000" d="M46.82,1.69V11.92H29.53V59.48H17.37V11.92H0V1.69Z"/>
54    <path class="cls-2" fill="none" stroke="#000" d="M96.62,11.92H66V24.19H94.11v10H66V49.09H98V59.48H54.23V1.69H96.62Z"/>
55    <path class="cls-3" fill="none" stroke="#000" d="M116.15,41.64a11.61,11.61,0,0,0,2.2,5.92q3,3.57,10.29,3.57a22,22,0,0,0,7.08-.94c3.45-1.2,5.17-3.44,5.17-6.7a4.94,4.94,0,0,0-2.53-4.43,27.29,27.29,0,0,0-8-2.71L124.08,35q-9.22-2-12.68-4.43-5.84-4-5.84-12.51a16.6,16.6,0,0,1,5.71-12.9Q117,0,128.07,0a25.71,25.71,0,0,1,15.77,4.84q6.54,4.85,6.85,14.06H139.08a8.24,8.24,0,0,0-4.66-7.41A15.93,15.93,0,0,0,127.23,10a13.74,13.74,0,0,0-7.64,1.88,6,6,0,0,0-2.86,5.25,5,5,0,0,0,2.82,4.63,34.5,34.5,0,0,0,7.68,2.39l10.14,2.4q6.67,1.56,10,4.19,5.16,4.08,5.16,11.8a16.58,16.58,0,0,1-6.12,13.16Q140.29,61,129.11,61q-11.42,0-18-5.16t-6.54-14.18Z"/>
56    <path class="cls-4" fill="none" stroke="#000" d="M203,1.69V11.92H185.71V59.48H173.55V11.92H156.18V1.69Z"/>
57    </g>
58    </g>
59</svg>
60</body>
61</html>