How to Cut a Circular Part from an Image Using a Mask in SVG?

Cutting a Circular Part from an Image

When attempting to clip an image using an SVG path, it can sometimes appear as if the image is not fitting properly. To achieve the desired circular cutout, follow these steps:

The following CSS code defines a clip-path using the provided SVG path. However, the image still may not fit correctly.

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

To resolve this issue, an alternative SVG approach can be taken.

<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>

This method defines a mask within the SVG, ensuring a clean circular cutout. The use of fill="url(#img)" within the tag fills the rectangle with the desired image, applying the mask to achieve the intended effect.

The above is the detailed content of How to Cut a Circular Part from an Image Using a Mask in SVG?. For more information, please follow other related articles on the PHP Chinese website!