In this demo you can choose the mask elements and an element to be masked. The appropriate code will be displayed.
You choose the element to be masked in the selection on the left. A few masks are defined in the 'defs' area of the svg. Each mask has its ID, e.g. id="test1". To use the mask (for example test1), set mask="url(#test1)" in the masked element definition.
You can change the code as you like. You can add additional masks in the 'defs' section with different ids. You can add additional elements to be masked.
Note that mask image used in this demo is the following:
Try to define instead of mask attribute, the CSS style mask property. You can use this 'mask' CSS property in CSS for HTML elements too (new feature - see can I use).
<g style="mask: url(#test)"></g>
Pay attention that if black mask areas are applied to masked element, these parts in the masked element will be invisible. If white mask is applied, there is no change in the element visibility. See also the effect of the 'test4' mask. It uses white rectangle in addition to the circles. Try to remove it and see the result.