CODEWITHSUNDEEP
htmlcsssvgmask
Joel
Joel

Reputation: 689

masking with svg mask defined in html

I am trying some very simple test of masking with an SVG shape I create in the html content. I have tried different option:

I cannot make it work, I must do something wrong and stupid.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mask with SVG</title>
        <link rel="stylesheet" href="/style.css" />
    <style>
        .testMask {
            -webkit-mask-image: url(#torch);
            mask-image:url(#torch);
        }
    </style>
</head>
<body>
   <svg width="0" height="0">
        <defs>
            <mask id="torch">
                <circle cx="0.5" cy="0.5" r="0.1" fill="white" />
            </mask>
        </defs>
    </svg>
    <div id="mainPage">
        <img src="/img/Japan.jpg" class="testMask">
    </div>
</body>

Is there something wrong in there? Second question would be, is there a way to change the mask coordinates by js? I want it to follow the mouse pointer.

Thanks!

Upvotes: 2

Views: 1544

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101800

The default units for <mask> content elements are objectBoundingBox (ie. maskContentUnits="objectBoundingBox"). In this mode, the coordinates used in the elements that are part of the mask are relative to the bounding box. In other words, (0,0) is top left, and (1,1) is bottom right.

So your circle at (50,50) is way off the edge of the mask.

It's preferable to stick with objectBoundingBox units, so try the following instead:

<mask id="torch" >
    <circle cx="0.5" cy="0.5" r="0.1" fill="white" />
</mask>

Note:

Masking with an inline SVG works in Firefox (see http://jsfiddle.net/dv6mx96t/), but not Chrome. For masks that work cross-browser, you need to use an external image. That image can be an SVG, or a PNG etc.

For example:

.testMask {
    mask: url(mask.svg);
}

Where mask.svg is:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1">
    <circle cx=".5" cy=".5" r=".35" fill="white" />
</svg>

Upvotes: 2

Related Questions