818 views
この記事は最終更新から 1680日 が経過しています。
1. やりたいこと
前回の投稿 (80) 【SVG画像】WEBブラウザ上でアニメーションさせる。(CSS編#1) では、自作のベクタ画像（SVG画像）ファイルを IMGタグで WEBブラウザ上に表示し、CSSでアニメーションさせるまでをやってみた。
今回は…
IMGタグを使わず SVGタグのまま WEBブラウザ上にベクタ画像を表示し、SVGの CSSパラメータを時間変化させてアニメーションさせる
をやってみたい。
2. Adobe Illustratorが出力した SVG画像を見てみる。
(79) 【SVG画像】WEBブラウザにSVG画像を表示する。 では、Adobe Illustratorを使って★の画像を作成し、これを SVGファイル形式で出力し、IMGタグの src属性でこの SVG画像ファイルを指定することにより、WEBブラウザ上に SVG画像を表示させる方法を学習した。
<img src="./svgimg1.svg">
WEBブラウザでは、わざわざ IMGタグを使わずとも
SVGタグのままのベクタ画像を表示させることが出来る。
(1) 全体を見る。
まずは、Adobe Illustratorが出力した上記の★画像のSVGファイルの中身を見てみる。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 188.43 180.82">
<defs>
<style>
.cls-1{
fill:#efea3a;
stroke:#231815;
stroke-miterlimit:10;
stroke-width:6px;
}
</style>
</defs>
<title>returnアセット 1</title>
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<polygon class="cls-1" points="151.38 172.22 96.34 145.21 42.89 175.23 51.57 114.54 6.5 72.98 66.91 62.48 92.5 6.78 121.15 60.98 182.04 68.11 139.34 112.11 151.38 172.22"/>
</g>
</g>
</svg>
(2) スタイルを見る。
表示スタイルを定義しているのはこの部分だ。
参考：https://triple-underscore.github.io/SVG11/painting.html
.cls-1{
fill:#efea3a; /* 塗りつぶし色 */
stroke:#231815; /* アウトライン色 */
stroke-miterlimit:10; /* ※難しいので現時点ではスキップ */
stroke-width:6px; /* ストロークの幅（＝線の太さ） */
}
(3) 図形情報（＝頂点情報）を見る。
形を定義しているのはこの部分だ。
★を構成する頂点情報が書かれている。
空白文字区切りで数値が 22個書かれている。
x1 y1 x2 y2 … x22 y22
の順に、星形を構成する全11点の X,Y座標情報が書かれている。
更に class属性で上記(2)のスタイルの適用を宣言している。
<polygon class="cls-1" points="151.38 172.22 96.34 145.21 42.89 175.23 51.57 114.54 6.5 72.98 66.91 62.48 92.5 6.78 121.15 60.98 182.04 68.11 139.34 112.11 151.38 172.22"/>
3. スタイル情報を変化させてみる。
(1) 塗りつぶし色と線の太さを変化させてみる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00081 demo1</title>
<style>
.cls-1{
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: anim_star;
}
@keyframes anim_star{
0% { fill:#efea3a; stroke-width:6px; }
50% { fill:#ff0000; stroke-width:3px; }
100%{ fill:#efea3a; stroke-width:6px; }
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 188.43 180.82">
<defs>
<style>
.cls-1{
fill:#efea3a;
stroke:#231815;
stroke-miterlimit:10;
stroke-width:6px;
}
</style>
</defs>
<title>returnアセット 1</title>
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<polygon class="cls-1" points="151.38 172.22 96.34 145.21 42.89 175.23 51.57 114.54 6.5 72.98 66.91 62.48 92.5 6.78 121.15 60.98 182.04 68.11 139.34 112.11 151.38 172.22"/>
</g>
</g>
</svg>
</body>
</html>
(2) 図形の大きさを変化させてみる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>00081 demo1</title>
<style>
.cls-1{
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-name: anim_star;
}
@keyframes anim_star{
0% { fill:#efea3a; stroke-width:6px; transform: scale(1.0, 1.0); }
50% { fill:#ff0000; stroke-width:20px; transform: scale(0.5, 0.5); }
100%{ fill:#efea3a; stroke-width:6px; transform: scale(1.0, 1.0); }
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-15 -15 203.43 195.82">
<defs>
<style>
.cls-1{
fill:#efea3a;
stroke:#231815;
stroke-miterlimit:10;
stroke-width:6px;
}
</style>
</defs>
<title>returnアセット 1</title>
<g id="レイヤー_2" data-name="レイヤー 2">
<g id="レイヤー_1-2" data-name="レイヤー 1">
<polygon class="cls-1" points="151.38 172.22 96.34 145.21 42.89 175.23 51.57 114.54 6.5 72.98 66.91 62.48 92.5 6.78 121.15 60.98 182.04 68.11 139.34 112.11 151.38 172.22"/>
</g>
</g>
</svg>
</body>
</html>
4. 所感
CSSアニメーションで出来ることは、CSSパラメーターを時間変化させることだけ。
ベクタ画像ならではのアニメーション
すなわち…
「頂点位置を時間変化させて図形を歪ませる」
のようなアニメーションは CSSでは実現できない。
よって、次回以降は…
非CSSなアニメーションにより
ベクタ画像を歪ませるようなアニメーション作りのための学習を進めたい。
5. 謝辞
有益な情報ありがとうございます。
https://triple-underscore.github.io/SVG11/painting.html
https://ics.media/entry/15970/
https://ferret-plus.com/7522