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