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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/07/25 04:05