【HTML・CSS】 「SVG」要素に「グラデーション」をかける方法

こんにちは、さち です。

先日、「HTML」の <svg> 要素に「グラデーション」をかけたいことがありました。

<div> 要素などと違って意外と面倒だったので、実装する方法を備忘録として記事に残しておきます。

「HTML」で実装する

実行結果

HTML

<svg width="180" height="180">
  <!-- グラデーションの指定 -->
  <defs>
    <lineargradient id="sample">
      <stop offset="0%" stop-color="crimson"></stop>
      <stop offset="100%" stop-color="royalblue"></stop>
    </lineargradient>
  </defs>

  <!-- ダイヤの形状 -->
  <polygon points="0,90 90,0 180,90 90,180" fill="url(#sample)"></polygon>
</svg>

<svg> タグ内に <defs> タグを追加。さらに、その中に <lineargradient> タグ内を追加して <stop> でグラデーションの指定をします。

また、<lineargradient> に記述した id="sample" を使って、<polygon> に適用するグラデーションを fill="url(#sample)" で指定しています。

「CSS」で実装する

実行結果

HTML

<div id="mask"></div>

CSS

#mask {
  width: 180px;
  height: 180px;

  /* グラデーションの指定 */
  background: linear-gradient(to right, crimson 0%, royalblue 100%);

  /* ダイヤの形状 */
  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><polygon points="0,90 90,0 180,90 90,180"></polygon></svg>'); 
  -webkit-mask-size: contain; 
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><polygon points="0,90 90,0 180,90 90,180"></polygon></svg>');
  mask-size: contain;
}

動作としては、<div> に通常のグラデーションをかけ、<svg> の形で切り抜くということをしています。

mask-image の効果

<div> を切り抜きます。

値の url() 内に書く <svg> タグには xmlns="http://www.w3.org/2000/svg" を付けないと正常に動作しない場合があります。気をつけて下さい。

mask-size の効果

mask-image で使用する <svg> を、<div> 要素の中に収まるサイズにします。

「ベンダープレフィックス」の使用

これらの CSS プロパティは、正式対応が2023年以降というブラウザーもあります。ベンダープレフィックス -webkit- を付けたものも記述しておいた方が安全です。

各ブラウザーの対応は下記リンク先で確認できます。

→ CSS property: mask-image - Can I use...
→ CSS property: mask-size - Can I use...