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

投稿者: | 2020年2月7日

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

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


カテゴリー: SVG

コメントを残す

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


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