将 SVG 蒙版切割成图像

Question

我在开发一个新网站时遇到了问题。这是我第一次使用 SVG。基本上，我需要从图像中剪出一个始终位于页面中心的圆圈，以显示元素下的图像。我尝试过使用我的剪辑，一切都很棒。我似乎无法在我的掩码代码中找到错误。这是我设置的快速小提琴link。谢谢！

    <div class="bg-gradient">
    <img src="http://www.redhdwallpapers.com/wp-content/uploads/2014/05/red-background-6.jpg"/>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="mask">
      <circle cx="50%" cy="50%" r="45%" fill="none" />
    </mask>
  </defs>
</svg>

Answer 1

fill="none" 的掩码根本就不是掩码。请尝试使用 fill="white"。

如果你想要一个洞，那么你会想让你的蒙版与现在相反，所以使用带有fill-rule: evenodd 属性的路径，并首先使用 M、h 和 v 围绕边缘绘制一个矩形图像，然后使用圆弧或贝塞尔曲线在与您绘制边缘的方向相反的方向上绘制一个圆，以便填充规则在路径中形成一个洞。

您最好切换回 clipPath，因为如果您只想进行剪辑，它使用的内存比掩码少得多。