(80) 【SVG画像】WEBブラウザ上でアニメーションさせる。(CSS編#1)

投稿者: | 2020年2月7日

この記事は最終更新から 625日 が経過しています。

1. やりたいこと

前回の投稿 (79) 【SVG画像】WEBブラウザにSVG画像を表示する。 では、自作のベクタ画像(SVG画像)ファイルを WEBブラウザ上に表示するまでをやってみた。

今回は…
WEBブラウザ上に表示させたベクタ画像を CSSを使ってアニメーションさせたい!

2. やってみる

CSSを使用したアニメーションの手順はラスタ画像の場合と同じだ。
CSSのパラメータを時間変化させることによりアニメーションを実現する。

(1) 移動させる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00080 demo1</title>

<style>
img#star{
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
    /**/
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: anim_star;
}
@keyframes anim_star{
	0%  { left: 0%;}
	100%{ left: 100%;}
}
</style>
</head>
<body>

<img id="star" src="./svgimg1.svg">

</body>
</html>

(2) 回転させる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00080 demo2</title>

<style>
img#star{
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
    /**/
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: anim_star;
}
@keyframes anim_star{
	0%  { transform:rotate(0deg);}
	100%{ transform:rotate(360deg);}
}
</style>
</head>
<body>

<img id="star" src="./svgimg1.svg">

</body>
</html>

(3) 移動+回転+拡大させる。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00080 demo3</title>

<style>
img#star{
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
    /**/
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: anim_star;
}
@keyframes anim_star{
	0%  { left:0%;   top: 0%;   width: 100px; transform:rotate(0deg);}
	100%{ left:100%; top: 100%; width: 300px; transform:rotate(360deg);}
}
</style>
</head>
<body>

<img id="star" src="./svgimg1.svg">

</body>
</html>

※Microsoft Edgeだとなぜか表示されない… Microsoft IE11では表示されるのに。

3. 所感

IMGタグを使って SVG画像を表示した場合
「ベクタ画像の頂点座標を時間変化させて図形を変形させる」のような
ベクタ画像ならではのアニメーションが実現できない。

よって…
次回以降は、ベクタデータを時間変化させられるようなアニメーションの実現手段を学習したい。


カテゴリー: SVG

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)