Css Property Mask Is Not Working Properly For Svg

Css property clip-path is work fine but mask or -webkit-mask is not working properly in this example. Please help me to solve this because my project is totally depended on maskin

Solution 1:

You need to reduce your SVG code and remove all the g element to keep only the path like this:

https://jsfiddle.net/hro4wbzf/

Then you use this inside the mask and you do the rotation with CSS if needed:

https://jsfiddle.net/7kyazn30/

Related: How to resize ClipPath area of SVG?

Solution 2:

For a huge online svg, I recommend you use the tag ... , instead of passing it entirely in the url() property of your css as you did. The risk of error is greater. So here's what I suggest.

<mask  id="maskMaskSource" class="MaskType" maskContentUnits="objectBoundingBox">
<svg> .... </svg>
</mask>

And in your css:

#maskMaskSource {
mask-image: url(#maskMaskSource);
}
.MaskType {
mask-type: alpha;
}

You can get a more detailed explanation here: https://lab.iamvdo.me/css-svg-masks/#testM7