円形の SVG マスクに合わせて画像のサイズを変更するにはどうすればよいですか?

円形の SVG パスに合わせて画像のサイズを変更する

SVG パスを使用して画像から円形の部分を切り取る場合、次のことが重要です。適切な位置合わせを確保するために。画像がうまくフィットしない場合は、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>
    <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>
  </defs>
  <!-- Create a rect, fill it with the image and apply the mask -->
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

説明:

• #hole: これは、白と黒の 2 つの円を含む SVG マスクを定義します。白い円は表示される領域を表し、黒い円は円の外側の領域を隠すマスクを作成します。
• #img: SVG パターンは画像を使用してパターンを定義します。 patternUnits="userSpaceOnUse" 属性により、適用先の形状に合わせてパターンが引き伸ばされます。
• rect 要素は、SVG コンテナー全体を #img パターンで埋め、#hole マスクを適用して円形の切り抜きを表示します。

この強化されたアプローチを使用すると、画像は円形の SVG マスク内に適切に収まるようになります。

以上が円形の SVG マスクに合わせて画像のサイズを変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。