-
BLOG
知る。残す。伝える。
前回の記事で、deSVG.jsを使って、「SVGでインライン記述ではなくimgタグで設置してCSSコントロールする方法」を書きました。
上記の方法でimgタグで設置したものをvivus.jsでアニメーションをしようとしてみました。
できなかったのです。
なんぜ？と思い、deSVG.jsによって吐き出されたSVGのソースを見てみると、vivus.jsで必要なID名がないなど、色々データが変換されていることに気がつきました。
deSVG.jsはあくまでも「置換」されるもので、「そのまま吐き出す」のではなかったのです。
つまりCSSで色付けはできるものの、細かくアニメーションができなかったのです。
とにかく
◎SVGを外部ファイル化したい
◎外部ファイル化したSVGを「全くそのまま」インライン記述のように扱いたい
◎vivus.jsでSVGアニメーションしたい
この三つをクリアしたかった。クリアしたかった。
そこで非同期大先生「Ajax」でできるのでは？と思いやってみたところ、できた。
Ajax様天才x80000000
ということで備忘録。
※deSVG.js関連記事：SVGをインライン記述ではなくimgタグで設置してCSSコントロールできるdeSVG.js
※vivus.js関連記事：Illustratorでデータを作りsvgアニメーションで文字を書いてみた【手書き風編】
（1）SVGをAjaxで読み込む
（2）読み込んだSVGをvivus.jsでアニメーション
※jQueryをあらかじめ読み込んでおく
$.ajax({
type:'GET',
url: 'img/hoge.svg',//svgファイルの場所
success:function(data){
var svgData = $(data).find('svg');
$('#hogehoge').prepend(svgData);//吐き出したいIDの場所に設置
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vivus/0.4.4/vivus.min.js" type="text/javascript"></script>
<script new Vivus('IDNAME',//動かしたいSVGのID名
{
type: 'oneByOne', //1パスずつ書く
start: 'inViewport', //ビューポート内に表示されたらスタート
duration: 200, //速さ
animTimingFunction:Vivus.EASE_OUT//イージング
});></script>
花粉のない国を作りたい
© Copyright 2020 NIAR All rights reserved.