1,332 views
この記事は最終更新から 2288日 が経過しています。
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画像を表示した場合
「ベクタ画像の頂点座標を時間変化させて図形を変形させる」のような
ベクタ画像ならではのアニメーションが実現できない。
よって…
次回以降は、ベクタデータを時間変化させられるようなアニメーションの実現手段を学習したい。
アクセス数（直近7日）: ※試験運用中、BOT除外簡易実装済2026-05-15: 1回 2026-05-14: 0回 2026-05-13: 0回 2026-05-12: 0回 2026-05-11: 0回 2026-05-10: 0回 2026-05-09: 0回