SVG でマスクを使用して画像から円形の部分を切り取る方法

画像から円形部分を切り取る

SVG パスを使用して画像を切り取ろうとすると、画像が適切にフィットしていないように見えることがあります。目的の円形のカットアウトを実現するには、次の手順に従います。

次の CSS コードは、提供された SVG パスを使用してクリップパスを定義します。ただし、画像はまだ正しくフィットしない可能性があります。

<code class="css">.topbar-chat-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  clip-path: url(#topbar-img-svg);
}</code>

この問題を解決するには、別の 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="image.jpg" x="0" y="0" width="200" height="200" />
    </pattern>
  </defs>

  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

このメソッドは SVG 内でマスクを定義します。きれいな円形のカットアウトを確保します。 内での fill="url(#img)" の使用。タグは、四角形を目的の画像で塗りつぶし、マスクを適用して意図した効果を実現します。

以上がSVG でマスクを使用して画像から円形の部分を切り取る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。