CSS SVG Mask for Firefox syntax issue

Question

From the Mozilla Developer page, I am trying to recreate their SVG mask for CSS using the mask property.

CSS:

#canvasPreview {
    mask: url(images/masks/circle2.svg#circleMask);
}

HTML:

<img id="canvasPreview" src="placehold.it/100x100"></img>

SVG:

<svg>
    <mask id="circleMask" maskContentUnits="objectBoundingBox">
        <circle cx="50" cy="50" r="50" fill="white" />
    </mask>
</svg>

The SVG is externally referenced, not embedded like the MDN example. I have not tried embedding it, but I don't see why that would help. There are a few things I'm not clear on.

1. In the CSS, why am I putting the #circleMask identifier after the URL? Removing it does not make my code work and its inclusion was found on the MDN site specs, so I put it in there.

2. Is my SVG correct? Do I have to use the <mask> tag and id and objectBoundingBox attributes? What are they used for?

Answer 1

The part after the # in the URL must be the same as id of the mask. So you have that part right.

You can use objectBoundingBox if you want but then your content seems wrong. Your mask radius is 50 times the size of the object it is masking. Perhaps you meant 50%. Same with cx and cy.