Home
CSS
SVGの背景色が変化するグラデーションのアニメーションを実装する方法

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

公開日
2022.06.04
更新日
2022.06.08
SVGの背景色が変化するグラデーションのアニメーションを実装する方法

どうも!かけちまるです!

SVGの背景色をグラデーションにし、一定時間で色が変化していくアニメーションを実装します。
パスが繋がっている図形なら簡単に思えるかもしれません。
しかし、次のような図形同士が離れている文字のSVGはどうでしょうか?
このようなパスが繋がっていなくても全体にグラデーションのアニメーションをかける方法も解説します。

  

この記事では、

  • ・SVGにグラデーションアニメーションをかける方法
  • ・文字のSVGにグラデーションアニメーションをかける方法

がわかります。

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

まずは、パスが繋がっている図形のグラデーションからやってみましょう。

完成形は次のようになります。

See the Pen SVG Star Gradation Animation by kakechimaru (@kakechimaru)on CodePen.

実装手順としては、

  • ①SVGを直書きする
  • ②linearGradientタグを追加する
  • ③stopタグをlinearGradientタグの子要素として追加
  • ④CSSでアニメーションをかける
  • ⑤完成
1

SVGを直書きする

タグの追加やCSSでスタイルを指定したりするのでSVGをHTMLに直書きします。

不要な記述は削除しておくと編集しやすくなります。
例えば、xmlタグやsvgタグに指定してあるxmlns属性、styleタグ内のCSSは別ファイルに移すとか

ポイント
  • ・SVGをHTMLに直書きするには、IllustratorからコピペするかSVGとして書き出したファイルをエディターで開きコピペします。
HTML
コピー
<svg viewBox="0 0 95.11 90.45"> <polygon points="47.55 75 18.16 90.45 23.78 57.73 0 34.55 32.86 29.77 47.55 0 62.25 29.77 95.11 34.55 71.33 57.73 76.94 90.45 47.55 75"/> </svg>
2

linearGradientタグを追加する

グラデーションにするためにlinearGradientタグを追加します。
svgタグ内の始めに追加すると良いでしょう。
defsタグは可読性を加味して追加しています。推奨のようですがなくても大丈夫です。

HTML
コピー
<svg viewBox="0 0 95.11 90.45"> <defs> <linearGradient id="gradient"> </linearGradient> </defs> <polygon points="47.55 75 18.16 90.45 23.78 57.73 0 34.55 32.86 29.77 47.55 0 62.25 29.77 95.11 34.55 71.33 57.73 76.94 90.45 47.55 75"/> </svg>
3

stopタグをlinearGradientタグの子要素として追加

stopタグを追加します。
今回は2つ追加するので2色のグラデーションになります。

HTML
コピー
<svg viewBox="0 0 95.11 90.45"> <defs> <linearGradient id="gradient"> <stop id="stop1" offset="0%"/> <stop id="stop2" offset="100%"/> </linearGradient> </defs> <polygon points="47.55 75 18.16 90.45 23.78 57.73 0 34.55 32.86 29.77 47.55 0 62.25 29.77 95.11 34.55 71.33 57.73 76.94 90.45 47.55 75"/> </svg>

まだ黒い星型だと思いますが大丈夫です。

4

CSSでアニメーションをかける

次のCSSでSVGにグラデーションのアニメーションをかけることができます。

ポイント
  • polygon(星のパス)にfill: url(#gradient);を指定し、塗りをlinearGradientタグにする
  • #stop1#stop2それぞれに色を変化させるアニメーションをかける
CSS
コピー
svg{ width: 30%; } polygon{ fill: url(#gradient); } #stop1{ animation: stop1 5s ease-in-out infinite alternate; } #stop2{ animation: stop2 5s ease-in-out infinite alternate; } @keyframes stop1{ /* 紫から緑へ */ 0% {stop-color: #7A5FFF;} 100% {stop-color: #01FF89;} } @keyframes stop2{ /* 緑から紫へ */ 0% {stop-color: #01FF89;} 100% {stop-color: #7A5FFF;} }
5

完成

これでパスが繋がっている図形のグラデーションの実装は完了です。
最終的なHTML・CSSはこちらです。

HTML
コピー
<svg viewBox="0 0 95.11 90.45"> <defs> <linearGradient id="gradient"> <stop id="stop1" offset="0%"/> <stop id="stop2" offset="100%"/> </linearGradient> </defs> <polygon points="47.55 75 18.16 90.45 23.78 57.73 0 34.55 32.86 29.77 47.55 0 62.25 29.77 95.11 34.55 71.33 57.73 76.94 90.45 47.55 75"/> </svg>
CSS
コピー
svg{ width: 30%; } polygon{ fill: url(#gradient); } #stop1{ animation: stop1 5s ease-in-out infinite alternate; } #stop2{ animation: stop2 5s ease-in-out infinite alternate; } @keyframes stop1{ /* 紫から緑へ */ 0% {stop-color: #7A5FFF;} 100% {stop-color: #01FF89;} } @keyframes stop2{ /* 緑から紫へ */ 0% {stop-color: #01FF89;} 100% {stop-color: #7A5FFF;} }

グラデーションの切り替え位置を変えるには

切り替え位置を変更するには上記でstopタグに指定していたoffset属性の値を変えることで切り替え位置を変更することができます。

HTML
コピー
<svg viewBox="0 0 95.11 90.45"> <defs> <linearGradient id="gradient"> <!-- <stop id="stop1" offset="0%"/> --> <stop id="stop1" offset="30%"/> <stop id="stop2" offset="100%"/> </linearGradient> </defs> <polygon class="cls-1" points="47.55 75 18.16 90.45 23.78 57.73 0 34.55 32.86 29.77 47.55 0 62.25 29.77 95.11 34.55 71.33 57.73 76.94 90.45 47.55 75"/> </svg>

グラデーションの角度を変えるには

グラデーションの角度を変更したい場合linearGradientタグにgradientTransform="rotate(45)"のように指定すると変更できます。
gradientTransform="rotate(45)"だとグラデーションが45度になります。

HTML
コピー
<svg viewBox="0 0 95.11 90.45"> <defs> <!-- <linearGradient id="gradient"> --> <linearGradient id="gradient" gradientTransform="rotate(45)"> <stop id="stop1" offset="0%"/> <stop id="stop2" offset="100%"/> </linearGradient> </defs> <polygon class="cls-1" points="47.55 75 18.16 90.45 23.78 57.73 0 34.55 32.86 29.77 47.55 0 62.25 29.77 95.11 34.55 71.33 57.73 76.94 90.45 47.55 75"/> </svg>

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

次のサンプルのようにパスは繋がっていない文字にグラデーションのアニメーションをかける方法です。

SVGにグラデーションアニメーションをかける方法でアニメーションを実装できた人には簡単です。

gradientUnits属性を使う

linearGradientタグにgradientUnits属性の値にuserSpaceOnUseを指定することで全体にグラデーションをかけることができます。

具体的には以下のように指定します。

HTML
コピー
<linearGradient gradientUnits="userSpaceOnUse"></linearGradient>

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

WordPressでショートコードを自作する方法

WordPressでショートコードを自作する方法

【総まとめ】WebサイトにYouTube動画を埋め込む方法

【総まとめ】WebサイトにYouTube動画を埋め込む方法

【WPプラグイン不使用】目次を自動生成する方法

【WPプラグイン不使用】目次を自動生成する方法

floatで雑誌のようなテキストの回り込みを表現する

floatで雑誌のようなテキストの回り込みを表現する

【メンテナンス画面】LightStartの設定方法とデザインカスタマイズ

【メンテナンス画面】LightStartの設定方法とデザインカスタマイズ

【完全禁止は難しい】Webサイトの画像保存を禁止させる方法

【完全禁止は難しい】Webサイトの画像保存を禁止させる方法