ストロークのアイコン

ストローク Q&A

Q.

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

A.

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

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

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

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

class は、別ファイルで定義されている css animation と関連付けるために使用する名前です。比較的自由な文字が利用できるみたいですが、半角英数字とハイフンアンダースコアから成る名前にしておくのが無難です。

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 などの検索エンジンにより、自分のページをより多く表示させる方法を意味します。

次に、外部で定義する css は、下記のように、link タグで指定します。

<link rel="stylesheet" type="text/css" href="../../animate.css">
外部 css ファイルを指定するコード

rel type 属性は決まり文句なので、このままで OK です。 href 属性で、css ファイルを指定します。この例では親の親フォルダーにある animate.css ファイルを指定しています。

link タグは head タグ内に置く決まりなので、順番が前後しましたが前で述べた object タグよりも先に記述することになります。HTML の全体像は下記の通り。

<html>
<head>
<link rel="stylesheet" type="text/css" href="../../animate.css">
<title>タイトル</title>
</head>
<body>

<object class="a_rotate" data="../img/manma_neko/08.svg" type="image/svg+xml">
説明
</object>
</div>

</body>
</html>
HTML の全体像 (このままで動きます)

あとは、アニメーションを定義する css ファイルを用意すれば OK です。

.a_rotate {
  -webkit-animation: spin 5s linear infinite;
  -moz-animation: spin 5s linear infinite;
  -ms-animation: spin 5s linear infinite;
  -o-animation: spin 5s linear infinite;
  animation: spin 5s linear infinite;
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(0deg);}
  100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
  0% {-o-transform: rotate(0deg);}
  100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
animate.css

-webkit- -moz- -ms- -o- のプリフィックスありバージョンと無いバージョンがあって冗長ですが、現在のところ、色々と指定しておいた方がいいみたいです。

.a_animateobject と紐付けるための名前で、objectclass 属性で指定した名前の前に . を付けたものを指定します。

spin は今回定義するアニメーションの名前なので自由な名前に変更できます。 5s はアニメーションの周期で 5 秒を、infinite は無限に繰り返すの意味です。 linear は動かし方で、線形 (比例的、一定の割合) で値を変化させます。今回は、一定速度で回転させたいので linear を指定しましたが、他の値を指定すると最初と最後の動き出しをゆっくりにしたりできます。

@keyframes0% 100% ではアニメーションの最初と最後でどのような変形を行うか定義しています。 0deg 360deg は回転角度で、それぞれ 0、360度を表わしているので、1 周期につき、1 回転することになります。

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

ストローク ダウンロード

ご意見・ご要望など

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

共有