Svg面具/剪切路径的困扰 [英] Svg masks / clipping path woes

问题描述

这里是一个小调显示我目前工作的svg：

如果我可以反转剪切路径，这将是解决方案。

解决方案

这是否有办法吗？

<

只需将您的svg clippath 更改为掩码，添加一个白色矩形以覆盖所有区域，

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

并与 mask css属性。

  .mask {
 mask：url（#myMask）; 
} 
  

您可以通过将掩码和内容放在容器与位置：相对，然后添加位置：绝对到您的 .modal class。

here is a fiddle to show my current working of svg:

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

As you can see, I have added two circles which are masking the content behind. The mask is working as I want, but! I would like to change the background of the all of it to rgba(0,0,0,0.5).

At the moment I added:

background-color: pink;

this is applied to the .mask class and has colored in the circles. What I want to do is colour in everything but the circles.

Here is an image explaining what I mean.

If anyone can help me with this, that would be super :)

Update 1

I am trying to create this:

I have this fiddle now:

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

If I could invert the clipping path, that would be the solution. Is there anyway to do this?

Cheers.

解决方案

Just change your svg clippath to a mask, add a white rectangle to cover all your area and set the circles in black.

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

and use it with the mask css property.`

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

you can improve it a bit by placing both the mask and the content in a container with position:relative and then adding position:absolute to your .modal class.

这篇关于Svg面具/剪切路径的困扰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！