SVG を使用して画像から円形セクションを切り出す

クリップパスを使用して画像から円形セクションを切り取る現在の試みは、正しく位置合わせされていません。この問題に対処するために、SVG でマスクを使用する別のアプローチを検討します。

このコードは、背景をピンクに設定した SVG を作成します。 defs 要素内で、「hole」と呼ばれるマスクを定義します。このマスクは 2 つの円で構成されます。1 つは画像から保持したい円形領域を表す大きな白い円、もう 1 つは切り抜きを決定する小さな黒い円です。

次の要素は「img」と呼ばれるパターンです。このパターンは、図形の塗りつぶしとして使用する画像を指定します。パターンの寸法を SVG のサイズと一致するように設定し、URL からの画像を使用します。

最後に、SVG のスペース全体を満たす長方形を作成します。長方形の塗りつぶしは「img」パターンを参照するように設定され、「穴」マスクを適用して円形のセクションを切り出します。