CSSのみで画像のマスキング - Qiita.svg { -webkit-clip-path: url(#svgPath); clip-path: url(#svgPath); } <svg height="300" width="300" class="svg"> <image xlink:href="cat.jpg" x="0" y="0" width="300" height="300"/> <defs> <clipPath id="svgPath"> <circle cx="200" cy="220" r="55"></circle> </clipPath> </defs> </svg> ▼実行結果 メリット： SVGなのでじゃぎらない 画像の描画図形の位置やサイズ等に影響されない デメリット 複数のSVGをつかったマスキング切り抜くのが上手くいかない（実装方法の問題？） 参考記事 Clipping in CSS and S
