SVG パスを使用して円形の画像セクションを切り取る方法: 包括的なガイド

SVG を使用した円形の画像のカット

SVG パスを使用して画像の円形の部分をカットしようとすると、位置ずれが発生しました。望ましい結果を達成するには、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 above mask -->
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg>

この SVG 方法では、円形の穴とパターンを持つマスクを作成します。画像付き。次に、長方形が画像パターンで塗りつぶされ、穴でマスクされます。これにより、SVG コンテナ内の画像が円形に切り取られます。

以上がSVG パスを使用して円形の画像セクションを切り取る方法: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。