Svg 蒙版/剪切路径问题答案

【问题标题】：Svg masks / clipping path woesSvg 蒙版/剪切路径问题
【发布时间】：2014-08-07 23:39:27
【问题描述】：

这里有一个小提琴来展示我目前的 svg 工作：

如您所见，我添加了两个圆圈来掩盖后面的内容。面具按我的意愿工作，但是！我想把所有的背景都改成rgba(0,0,0,0.5)。

在我添加的那一刻：

background-color: pink;

这应用于 .mask 类并在圆圈中着色。我想做的是除了圆圈之外的所有东西都涂上颜色。

这是一张解释我的意思的图片。

如果有人能帮我解决这个问题，那就太好了:)

更新 1

我正在尝试创建这个：

我现在有这个小提琴：

http://jsfiddle.net/r3plica/g046qfyq/2/

如果我可以反转剪切路径，那将是解决方案。有没有办法做到这一点？

干杯。

【问题讨论】：

标签： html css svg

【解决方案1】：

只需将您的 svg clippath 更改为 mask，添加一个白色矩形以覆盖您的所有区域并将圆圈设置为黑色。

<mask id="myMask">
  <rect x="0" y="0" width="1000" height="1000" fill="white"/>
  <circle cx="30" cy="30" r="20" fill="Black"/>
  <circle cx="200" cy="200" r="100" fill="Black" />
</mask>

并将其与mask css 属性一起使用。`

.mask {
  mask: url(#myMask); 
}

您可以通过将掩码和内容都放在带有position:relative 的容器中，然后将position:absolute 添加到您的.modal 类中来稍微改进它。

【讨论】：

表示 ie 根本不受支持，但在这个小提琴中，它可以工作：jsfiddle.net/giri_jeedigunta/Z2J34

【解决方案2】：

只需用 div 包装所有内容并将rgba(0, 0, 0, 0.5) 应用为背景色。 http://jsfiddle.net/Justinas_Jurciukonis/g046qfyq/3/

编辑
为什么不直接使用深色背景颜色的叠加层和内部有孔的矩形的 css 图像？不仅仅是使用背景位置在页面中移动该圆圈。

【讨论】：

是的，但我想将其设置为透明黑色的原因是我希望它也显示下面的内容。
@r3plica 检查更新的 JSfiddle，你想要这样的东西吗？
不，检查我最后的小提琴。我做的最后一个小提琴正是我想要的。如果它可以倒置或以其他方式完成，那就完美了。