htmlcsssvgmasking

SVG file not being used as CSS mask

I want to use an SVG file as a mask for some images. However, it is not being used, and instead hides the entire image. I included it separately to check whether the path was wrong, but as an image it loads fine. I also checked it in different browsers, with and without quotes, and added some headers in the SVG, but nothing.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <style>
            #testDiv
            {
                display: inline-block;
                -webkit-mask:url("1.svg");
            }
        </style>
    </head>
    <body>
        <div id="testDiv">
            <img id="test" src="1.png" style="height: 250px; width: 1500px; object-fit: cover;">
        </div>
        <img src="1.svg">
    </body>
</html>

SVG:

<svg xmlns="http://www.w3.org/2000/svg" height="250px" width="1500px">
    <text x="0" y="180" font-family="Cambria, sans-serif" font-size="250">
        Text masking
    </text>
</svg>

Output (The top is empty, but it should show a masked image.): Output

What am I doing wrong? Thank you.

Also I should say that this works fine (I cut and formatted it to make it clearer, but in the code it's a single-line string with no line breaks.):

-webkit-mask:url('data:image/svg+xml;utf8,
<svg xmlns="http://www.w3.org/2000/svg" height="250px" width="1500px">
    <text id="mask" x="0" y="180" font-family="Cambria, sans-serif" font-size="250">
    Test masking
    </text>
</svg>');

Edit: I put it in "in-line" CSS and it shows the preview, so the SVG is being found, but it's not being applied: enter image description here

Solution

  • Use "-webkit-mask-image" instead:

    -webkit-mask-image:url("1.svg");