SVG のマスクを使用して、位置のずれた円形のカットアウトを修正するにはどうすればよいですか?

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

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

<code class="svg"><svg width="200" height="200">
  <defs>
    <mask id="hole">
      <circle r="100" cx="100" cy="100" fill="white"/>
      <circle r="50" cx="180" cy="180" fill="black"/>
    </mask>
  </defs>
  <pattern id="img" patternUnits="userSpaceOnUse" width="200" height="200">
    <image  xlink:href="https://picsum.photos/200/200?image=1069" x="0" y="0" width="200" height="200" />
  </pattern>
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

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

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

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

以上がSVG のマスクを使用して、位置のずれた円形のカットアウトを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。