Svg面具/剪切路径困境

Question

这是一个小提示，显示我目前的svg工作：

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

正如您所看到的，我添加了两个圈子，这些圈子掩盖了背后的内容。 面具正在按我的意愿工作，但是！我想将所有内容的背景更改为 rgba（0,0,0,0.5）。

目前我补充说：

background-color: pink;

这适用于.mask类，并在圆圈中着色。我想做的是除了圆圈以外的所有颜色。

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

如果有人可以帮助我，那将是超级的：）

更新1

我正在努力创造这个：

我现在有这个小提琴：

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

如果我能反转剪切路径，那将是解决方案。 反正有吗？

干杯。

Answer 1

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

修改
为什么不使用深色背景颜色的叠加层和内部有孔的矩形的css图像？而不仅仅是使用background-position来移动页面中的那个圆圈。

Answer 2

只需将您的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类中，从而稍微改善一下。