SVGにグラデーションのアニメーションをかける

Table of Contents

ソースコードはこんな感じ。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
    <defs>
        <linearGradient id="bearGratient" x1="100%" y1="100%">
            <stop offset="0%" stop-color="#69d2ff" stop-opacity=".5">
                <animate attributeName="stop-color" values="#69d2ff;#71dca7;#ffd458;#ffa7de;#69d2ff" dur="14s" repeatCount="indefinite" />
            </stop>
            <stop offset="100%" stop-color="#69d2ff" stop-opacity=".5">
                <animate attributeName="stop-color" values="#69d2ff;#71dca7;#ffd458;#ffa7de;#69d2ff" dur="14s" repeatCount="indefinite" />
                <animate attributeName="offset" values=".95;.80;.60;.40;.20;0;.20;.40;.60;.80;.95" dur="14s" repeatCount="indefinite" />
            </stop>
        </linearGradient>
    </defs>
    <g fill="url(#bearGratient)" transform="translate(0.000000,511.000000) scale(0.100000,-0.100000)">
        <path d="/* 中略 *//>
        <path d="/* 中略 *//>
        <path d="/* 中略 *//>
    </g>
</svg>

最初、 css の linear-gradient で線形グラデーションをかけようと思ったのだが、どうも svg には対応していないらしい。

svg のMDNを漁っていたら linear​Gradient というタグがあった。

https://developer.mozilla.org/ja/docs/Web/SVG/Element/linearGradient

良いサンプルがなかったので調べていたら、以下のようなsnippetがたくさん落ちていた。

サンプルコードによるとこんな感じ。

  • defs に linearGradient を定義する。
  • linearGradient に stop > animate 。 で時間に合わせたグラデーションをかけることができる。
  • 実際に描画する SVG 要素に上で定義した linearGradient を fill する。

これできた。

css や svg を使うことによって描画がものすごいきれいになるので多用していきたい。