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

  • Apr 14, 2019
  • SVG

自分のportfolioサイト で SVG にグラデーションのアニメーションをかけたのでメモ。

https://takeokunn.xyz/storage/app/media/portfolio-bear.png


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

takeokunn/portfolio/blob/master/templates/index.html#L9-L28:

<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>

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

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

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

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

サンプルコードによると、

  • defslinearGradient を定義する
  • linearGradientstop > animate で時間に合わせたグラデーションをかけることが出来る
  • 実際に描画する SVG 要素に上で定義した linearGradientfill する

これでできた。


cssSVG を使うことによって描画がものすごい綺麗になるので多用していきたい。