Svg面具/剪切路径的困扰

本文介绍了Svg面具/剪切路径的困扰的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 这里是一个小调显示我目前工作的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 1I 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面具/剪切路径的困扰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！