如何在 SVG 中使用蒙版纠正未对齐的圆形切口？

使用 SVG 从图像中剪切出圆形部分

您当前尝试使用剪辑路径从图像中剪切出圆形部分未正确对齐。为了解决这个问题，我们将探索在 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>
  </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" />
  </pattern>
  <rect fill="url(#img)" width="100%" height="100%" mask="url(#hole)" />
</svg></code>

此代码创建一个背景设置为粉红色的 SVG。在 defs 元素内部，我们定义了一个名为“hole”的掩码。该蒙版由两个圆圈组成：一个大的白色圆圈代表您想要从图像中保留的圆形区域，一个较小的黑色圆圈决定剪切。

下一个元素是一个名为“img”的图案。此图案指定要用作形状填充的图像。我们设置图案的尺寸以匹配 SVG 的大小，并使用 URL 中的图像。

最后，我们创建一个填充 SVG 整个空间的矩形。矩形的填充设置为引用“img”图案，然后我们应用“hole”蒙版来切出圆形部分。

以上是如何在 SVG 中使用蒙版纠正未对齐的圆形切口？的详细内容。更多信息请关注PHP中文网其他相关文章！