ストロークのアイコン

ストローク Q&A

Q.

javascript で、SVG 画像を回転アニメーション表示するには?

A.

いくつか方法があるのですが、IE11 で動くものとしては、css animation と、javascript で transform 属性をタイマーで動的に変更する方法の、2 択になるようです。このページでは、javascript を利用する方法について解説します。

javascript による回転 (LINE スタンプ「まんまネコ」 - リラックス)
javascript による回転 (LINE スタンプ「まんまネコ」 - リラックス)

↑の例の HTML の重要な部分を抽出すると下記のようになります。

<object id="svgObj" data="../img/manma_neko/08.svg" type="image/svg+xml">
説明文
</object>
object タグで svg ファイルを表示するコード

id は、javascript でタグを検索するのに使います。自由な名前に変更できますが、使用できる文字には制限があります。半角アルファベットで始まり、英数字とハイフン、アンダースコアから成る名前にしておくのが無難です。また、id は HTML 内で一意にする必要があります。

data には、表示する svg ファイルのパスを指定します。img タグでは src に相当する部分です。今回は相対パス で指定しましたが、もちろん、絶対パスや、http: で始まる URL を指定することもできます。

※ この例では、HTMLファイルのあるフォルダーの親フォルダーにある img フォルダーの下の manma_neko フォルダーの下にある 08.svg ファイルを指定しています。
(.. は親フォルダーを表す特殊なフォルダー名です)

type には、image/svg+xml を指定します。data で参照しているファイルの内容が svg であることを明示する役割があります。

説明文 は、本質的には不要ですが、img タグの alt 属性に相当するので、object が表示できないブラウザーなどで特に重要です。また、SEO 的にも有利になることが見込まれるので、必ず指定しておい方がよいでしょう。

※ SEO とは、Search Engine Optimization の略です。おおまかには、Google などの検索エンジンにより、自分のページをより多く表示させる方法を意味します。

次に、javascript です。

<script>
jQuery(document).ready(function($) {
  $(window).load(function() {
    
    var svgContent = document.getElementById("svgObj").contentDocument;
    svgContent = $(svgContent);
    var root = svgContent.find('#root');
    
    var angle = 0;
    setInterval(function() {
      root.attr('transform', 'rotate(' + angle + ', 185, 160)');
      angle += 2;
    }, 30);
    
  });
});
</script>
javascript で svg の transform 属性を変更するコード

簡単のため、jQuery という javascript のライブラリーを利用しています。
jQuery を使用するため、HTML の head 部分に下記のような記述が必要です。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

まず、jQuery(document).ready ... では、html の読み込みが終わった時点で実行する関数を定義しています。関数内では、$(window).load ... により、html 以外の要素も読み終わった時点で実行される関数を定義しています。

svg は、object タグにより、html よりも後に読み込まれるので、$(window).load ... より後のタイミングで操作する必要があります。

var svgContent = document.getElementById("svgObj").contentDocument;

により、object タグで読み込まれた svg ファイルを参照できます。

svgContent = $(svgContent);

は「おまじない」みたいですが、普通の html DOM オブジェクトを、jQuery のオブジェクトに変換する作用があります。

var root = svgContent.find('#root');

は、jQuery オブジェクトから、idroot の要素を探す jQuery の命令です。svg タグには、直接 transform 属性を設定することはできないので、図形全体を g タグで囲い、その g タグに対して transform 属性を設定することになります。そのルートの g タグには、id 属性として root が指定してあるので、上記コードで、変更対象の要素が選択されます。

var angle = 0;
setInterval(function() {
  root.attr('transform', 'rotate(' + angle + ', 185, 160)');
  angle += 2;
}, 30);

最後に、30 ms 置きに、選択した g 要素の transform 属性を書き変える関数を定義しています。 angle は呼び出される度に、2 足されるので、30 ms 枚に 2° 回転することになります。

svg の要件

上記コードを動かすための svg の要件は、svg 内で transform させたい要素の id 属性を root にすることです。前にも述べましたが、svg タグに transform 属性を持たせることはできないので、典型的には、全ての図形を包む g タグを用意して、id 属性を root とすることです。もちろん root 以外の名前でも OK ですが、その場合 svgContent.find('#root'); の名前を適宜、変更する必要があります。

ストロークで出力した svg を利用する条件

ストローク で出力した svg はディフォルトの出力オプションを使用した場合、そのまま使えます。重要なのは、ルート用 <g> を出力することと、ルート用 <g> の id 属性に指定した名前を使って javascript から、ルート <g> を取得することです。ディフォルトでは、ルート用 <g> の id 属性には、root が指定されているので上記コードはそのまま動きます。

Chrome で表示する場合の注意点

上記コードは、現在のところ、IE11、Edge、Google Chrome で動作を確認済みですが、Chrome では、ローカルファイルとして読み込んだ場合、contentDocument で実行が止まる仕様みたいです (2015/9/29 現在)。http なら大丈夫みたいです。自分は結構、はまったので注意してくださいね。あと、自分が配布している ローカルブラウザ でも動かないみたいです。残念。利用しているウェブブラウザーオブジェクトの中身は IE 11 と同じだと思ってたんですけど、実は別物なのかな?

今すぐ、無料ダウンロード

ストローク ダウンロード

ご意見・ご要望など

ご意見・ご要望などは フォームメール から送信してください。
更新情報は、 ブログ でも配信してます。

共有