###svgアニメーションをhtmlに挿入したい
イラレで作ったsvgをLazy Line Painterというサイトでアニメーションに変換しました。ここで作ったファイルをhtmlに挿入したいのですが、どこにいれたらいいのかわかりません。
下のサイトを参考にしました。
SVGとjQueryで絵を描いているようなアニメーションを実装する方法
助けてください。
html
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3<head> 4<meta charset="UTF-8" /> 5<title>共演者まとめ</title> 6<h1>共演者まとめ</h1> 7 <p>若手俳優がいつだれと共演したのかまとめました。</p> 8 9</head> 10<body> 11<div id="kkss3"> 12</div> 13<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 14<script src="js/jquery.lazylinepainter-1.7.0.min.js"></script> 15<script src="js/kkssillust.js"></script> 16<script src="js/kkssscript.js"></script> 17 18</body> 19</html>
###kkssscript.js
javascript
1//SVG設定用 2 var $svg_elems = $('#kkss3'); 3//$svg_elems.lazylinepainter( 4 //{ 5 //"svgData": pathObj, 6 //"strokeWidth": 2, //線の太さ 7 //"strokeColor": "#fff" //線の色 8 //}).lazylinepainter('paint'); 9 10 //かとべとしょごたんSVG 11 $('#kkss3').lazylinepainter( 12 { 13 "svgData": pathObj, 14 "strokeWidth": 3, //線の太さ 15 "strokeColor": "#666666" //線の色 16 }).lazylinepainter('paint');
###表示されているエラー
Error: <path> attribute d: Expected number, "M 446.6,195. L 474.4,244…".
jquery.js:7975 Error: <path> attribute d: Expected number, "M 437.6,212. L 456.3,244…".
Error: <path> attribute d: Expected number, "M 530.2,147. L 558,195.5…".
jquery.lazylinepainter-1.7.0.min.js:10 Uncaught TypeError: Cannot read property 'x' of undefined