0

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

    <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>
4

1 回答 1

0

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

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

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

于 2014-08-21T23:17:55.287 回答