CODEWITHSUNDEEP
htmlcsssvgclip-pathcss-mask
Jignesh Panchal
Jignesh Panchal

Reputation: 1376

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 masking image with svg file.

In clip-path, i can't resize image in responsive views so i have only one way to solve this problem.

So please check example code , may be i have made any mistake.

Upvotes: 0

Views: 6904

Answers (2)

Temani Afif
Temani Afif

Reputation: 274252

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?

Upvotes: 2

Genjiru S Uchiwa
Genjiru S Uchiwa

Reputation: 19

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

Upvotes: 1

Related Questions