如何在 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中文网其他相关文章！