SVGファイルで画像をマスクする

Website
2020.04.10

イラストレータで作ったSVGファイルで画像をマスクしてみよう。

イラストレーターでSVGを作るときはアートボードで保存
結論。イラストレーターで描いたデータをSVGとして使いたいとき、アートボードを利用するとターゲットになる図形だけを保存できる。 描いた図形をそのままSVGとして保存しただけでは... ブラウザーで表示するとこうなる。 ...
milkmoo.info
2020.04.10

▼画像

▼SVG

mask を指定しただけだと…

.mask {
	mask-image: url(https://milkmoo.info/svg/chr-logo.svg);
}

こうなる…
↓

はずだが… Chromeで見ると…

マスクされてないじゃ

Chromeの場合、mask-imageじゃマスクされない(T_T)。追加の属性が必要。

.mask {
	mask-image: url(https://milkmoo.info/svg/chr-logo.svg);
	-webkit-mask-image: url(https://milkmoo.info/svg/chr-logo.svg);
}

うまくいったので、次は繰り返しを止めてみる。

.no-repeat{
	mask-image: url(https://milkmoo.info/svg/chr-logo.svg);
	-webkit-mask-image: url(https://milkmoo.info/svg/chr-logo.svg);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
}

これもchrome対応が必要

元の画像サイズで表示されるため余白が…
↓

↑
余白がわかりやすいよう border: 1px solid で囲ってます。

元画像をトリミングしたり、マスクサイズを大きくしてみたりを足してあげて…

.masked-element {
	mask-image: url(https://milkmoo.info/svg/chr-logo.svg);
	-webkit-mask-image: url(https://milkmoo.info/svg/chr-logo.svg);
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: 600px;
	-webkit-mask-size: 600px;
	object-fit: cover;
	height: 90px;
}

やっと使えそうな感じになってきた。

モノトーン画像のワンポイントにどうかな。アニメーションさせたりするといい感じかもしれない。

コメント