On the left three times the same file:
Right-click, save ...
Here we actually deal with a cutting, areas outside the clipping are not shown at all. The SVG-Viewer may react different in the different Browsers, as to the W3C-Specs the background colour should shine through from the HTML files. This is can be done with Internet Explorer, see the technical details at svg in html.
The clipping path is defined within the header:
<path d="M1041 2081c-15,6 ... 22,25z" />
In between the clipPath-statements, any SVG-objects may reside, e.g. also text.
A group tag is covering the elements that should be clipped with a reference to the clipping path as stated below:
See also www.w3.org/TR/SVG/masking.html#ClippingPaths
A mask doesn't need to consist of one single object, but can be any (grouped) object that overlays the object to be masked. Transparency can be used to achieve certain effects.
See also www.w3.org/TR/SVG/masking.html#Masking
Monday, 03-Jul-2017 19:23:09 CEST
© carto:net (andreas neumann & andré m. winter)
original URL for reference: http://old.carto.net/papers/svg/samples/clipmask.shtml