How to Correct Misaligned Circular Cutouts Using Masks in SVG?

Cutting Out Circular Sections from an Image with SVG

Your current attempt at using a clip-path to cut out a circular section from an image is not aligning properly. To address this issue, we'll explore another approach using masks in SVG.

<code class="svg"><svg width="200" height="200">
  <defs>
    <mask id="hole">
      <circle r="100" cx="100" cy="100" fill="white"></circle>
      <circle r="50" cx="180" cy="180" fill="black"></circle>
    </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"></image>
  </pattern>
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)"></rect>
</svg></code>

This code creates an SVG with a background set to pink. Inside the defs element, we define a mask called "hole." This mask consists of two circles: a large white circle representing the circular area you want to retain from the image and a smaller black circle determining the cutout.

The next element is a pattern called "img." This pattern specifies the image you want to use as the fill for the shape. We set the pattern's dimensions to match the SVG's size and use an image from a URL.

Finally, we create a rectangle that fills the SVG's entire space. The rectangle's fill is set to reference the "img" pattern, and we apply the "hole" mask to cut out the circular section.

The above is the detailed content of How to Correct Misaligned Circular Cutouts Using Masks in SVG?. For more information, please follow other related articles on the PHP Chinese website!