Search code examples
htmlcsssvgclip-pathcss-mask

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.

Solution

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