Svg Clip

svg-clip.png
<clipPath id="clip">
ここにくり抜くための図形を描く
</clipPath>

使用上の注意

  • SVG要素に変なネームスペースがついてると効かない
  • clipPathの中で<g>要素は使用することができない

クリップ図形を反転させたい場合はmaskを使うしかない

<svg viewBox="0 0 200 200">
    <mask id="mask0" maskUnits="userSpaceOnUse" x="0" y="0" width="200" height="200">
        <g fill="black" fill-rule="evenodd"><!--くり抜き図形はblackで塗る-->
            <rect x="0" y="0" width="200" height="200" fill="white"/><!--画面を覆うような矩形をwhiteにしておく-->
            <rect x="25" y="25" width="50" height="50"/>
            <rect x="125" y="25" width="50" height="50"/>
            <text x="30" y="100">ここがマスク領域</text>
            <path d="M 25,125 v 30 h 100 v -30 h -100 m 50,30 v 20 h 100 v -30 h -100"/>
        </g>
    </mask>
    <rect x="0" y="0" width="200" height="200" fill="lightpink"/>
    <circle mask="url(#mask0)" cx="100" cy="100" r="90" stroke="aqua" stroke-width="10" fill="blue"/>
</svg>

サポートサイト Wikidot.com