css property mask is not working properly for svg

Question

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.

Habana

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

Pignut

Answer 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

Zosi

You can do a mask inline so there must be something wrong with the syntax he's using because it certainly is possible. – Chaperon

Maybe is possible, but I think that better to use html tag, for very huge inline svg.. @RobertLongson – Zosi