SVGをjQueryとCSS3を使ってアニメーションしてみる

素材:南海電鉄特急サザン

用意したSVG画像

これら6種類のSVG画像をIllustratorで作成し、SVG形式で保存しました。
ちなみに電車のSVG画像はIllustratorにJPEG画像を配置して、画像トレース機能を使って作成したものをSVG化したものです。

SVGはベクトル形式の画像形式であるため、パスやシェイプなどの図形に適しているという特徴があります。
したがって、単純な図形の場合、JPEGやPNG、GIFなどといった、ラスター形式の画像形式よりもファイルサイズが小さくて済みます。
また、粒の集合であるラスター形式と違い、位置情報を持ったベクトル形式は拡大しても画像がぼやけないといったメリットがあります。

しかし、今回の電車の画像のように、本来ラスター形式が適している写真画像をベクトル形式にすると、複雑なパスの集合体となり、 ファイルサイズが大きくなってしまうので、SVGの長所がなくなってしまいます。
適材適所。やはり、写真はラスター形式であるJPEGが適していますね。

じつはSVGそのものはjQueryで動かしていない

SVGの要素はHTML要素と同じようにjavascriptで取得や操作をすることができます。
しかしながら、今回のアニメーションはSVGそのものをjQueryで操作することはしておりません。

「ほな、なんでSVG使(つこ)てん?」と突っ込まれそうですが、簡単にアニメーションが実装できる例として、そこは大目に見てやってください(笑)

HTMLの構造はというと、SVGをdiv要素で囲って、CSSの「position: absolute;」で座標を指定しています。
そして、jQueryのanimateメソッドを使って、SVGを囲っているdiv要素の大きさを変化させているというだけの単純なつくりです。

ところで、画像要素(img要素)というものはCSSで「max-width: 100%;」と指定してあげれば、親要素に合わせて大きさが変わるのが一般的な解釈ですが、 SVGの場合はブラウザによっては親要素のに合わせて大きさが変化しないことがあります。
その対策として、子要素のSVG画像を「position: absolute;」で固定してしまうという方法があります。
しかしこのままだと、親要素が高さを持たなくなってしましますので画像が表示されません。
そこで親要素に対して、子要素のSVG画像の縦横比分のpadding-topを入れてあげると、きちんと画像が表示されるようになります。

「南」と「海」の文字の回転はCSSアニメーションで対応

「南」と「海」の文字はマウスオーバーすると回転します。
要素の回転はCSSプロパティのtransformで実現できます。
なので、jQueryのanimateメソッドの引数に、transformプロパティを入れればいいように思えます。
でも、これ、全然動かないんです。
じつはjQueryのanimateメソッドではtransformプロパティが使えないんです。
よって、「南」と「海」の文字の回転はCSSアニメーションを使って実装しました。

おまけ

最後までお読みいただきありがとうございました。
今回のアニメーションの素材として使った電車は、南海電鉄の特急サザンとして運用されている12000系です。
特急サザンは難波―和歌山港間に運行しており、和歌山港で徳島行きの鉄道連絡船に連絡してます。
和歌山港―徳島港間の鉄道連絡船は、都市間を結ぶ鉄道連絡船としては国内唯一の存在です。
興味を持ってくださいましたら、↓のロゴをクリックしていただけますと幸いです。