Search code examples
htmlcsssvgsvg-filters

Why is my image turned into negative using SVG mask

I've got a normal original image that is square or rectangular. What I want is to place an egg shaped oval over it to function as its mask.

It needs to be as crossbrowser compatible as it can be. Therefore I'm using this method below all other methods are less crossbrowser proof.

The problem

I'm getting a negative image. I tried using a white shape and a black shaped png. mask but with no luck. I tried to find a generator so i can upload an egg shaped svg but again with no succes.

<svg width="150" height="150" baseProfile="full" version="1.2">
    <defs>
        <mask id="svgmask2" maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse" transform="scale(1)">
            <image width="150" height="150" xlink:href="/website_url/FullSizeRender-150x150.jpg" />
        </mask>
    </defs>
    <image id="the-mask" mask="url(#svgmask2)" width="150" height="150" y="0" x="0" xlink:href="/website_url/img/clippath_mask.png" />
</svg>

Working (half working) example: js Fiddle right here

My Masking Image

Mask Image (.png)

Solution

    • You're mixing up the mask and the image, so swap them.

    • Also the mask needs to be inverted i.e. you want a white oval on a black background.