こんにちは、さち です。
先日、「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...
コメント