0

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.

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Jignesh Panchal
  • 1,037
  • 11
  • 29

2 Answers2

2

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?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
1

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

Genjiru S Uchiwa
  • 19
  • 2