SVGのmaskタグでマスクをかける

SVGのmaskタグでマスクをかける方法を試してみます。

サンプルコード

SVG内に画像を配置して、その画像に対してマスクをかけてみます。

<svg width="800" height="533" viewBox="0 0 800 533">
  <mask id="customMask">
    <rect width="600" height="300" x="50" y="100" fill="#ffffff"/>
    <circle cx="50" cy="100" r="50" fill="#ffffff"/><!-- 左上 -->
    <circle cx="350" cy="100" r="50" fill="#999999"/><!-- 真ん中上 -->
    <circle cx="650" cy="100" r="50" fill="#000000"/><!-- 右上 -->
  </mask>
  <image xlink:href="img.jpg" width="800" height="533" x="0" y="0" mask="url(#customMask)"/>
</svg>

maskタグに設定したid(customMask)をマスクをかける画像のmask属性に指定します。
maskタグのデモページ

maskタグ内でマスクをかける形の指定をしていますが、その際の塗りつぶしが白の場合はその範囲は表示され、黒の場合は非表示(マスクがかかる)になるようです。

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31