SVGパスアニメーションを手軽に実装できる jQuery DrawSVG の使い方
http://arakaze.ready.jp/archives/3530
SVGファイルのためのイラレ設定
https://hatsuka.info/design/svg
SVGアニメーションが5分で作れる！jQuery DrawSVGの使い方
http://stand-4u.com/plugin/drawsvg.html
http://stand-4u.com/stand-4u/html/draw_svg.html
↑のコードをWP内にコピペしたがIE11で動かない。（実際動いてるhtmlのほうのコード）
「jQueryが動かないときに試すこと～」みたいな検索結果をみて、下記のようにオレンジの読込部分を足したら動いた。なんでなのかはよくわかんねー
あとからフワッと色付けされているのは、画像を表示している。
本来ならfillとかで色付け出来ると思うがIEでcssで出来るのか試す。
svgと画像を重ねてるんだがずれる。同じイラレデータから作成してるのにずれる
なんでだよ！！ともう嫌になったが、通常すぎて忘れていたbox-sizing:border-box;のせいだった
これをcontent-boxに変えたら直った。
たまーにこれが影響すんだよな。レスポンシブにはborder-boxが必須なのによ
<script type="text/javascript">
jQuery(document).ready(function($){
var mySVG = $('.svg1').drawsvg({
duration:1000,
stagger:100,
easing:'swing',
reverse:false,
callback: function() {
//コールバックの処理を記述
$("#s4u").fadeIn(5300);
$(".svg1").fadeTo(1100, 0);
}
});
mySVG.drawsvg('animate');
});
</script>
