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

带填充的面具=＆＃34;无＆＃34;根本没有面具。尝试填充=＆＃34;白色＆＃34;代替。

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

你最好切换回一个clipPath，因为如果你想做的就是剪辑，它使用的内存远远少于一个掩码。

将SVG蒙版切割成图像

1 个答案: