main page - page initiale - hauptseite - página principal projects - projets - projekte - proyectos authors - auteurs - autoren - autores papers - exposés - berichte - papeles help - aide - hilfe - ayuda

carto:papers:svg:examples:basic:clipping_masking

Example for clipping and masking

On the left three times the same file:
  • A clipped region. We use a closed path from the "Bundesland" Kärnten. The rest of the map outside the clipping-path is never shown, even with sequential loading. Clipping doesn't allow transparency (only value 1 or 0). The background shines through. The word "background" in the map at the left is not included in the clipped area.
  • The same closed path as above is coloured red and used as a mask. Opacity is 20 percent. Every object, that means also text or a raster image can work as a mask.

Files used

Right-click, save ...

Technical Details

Clipping

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:
<clipPath id="kaernten">
  <path d="M1041 2081c-15,6 ... 22,25z" />
</clipPath>
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:
<g clip-path="url(#kaernten)">
  ...
</g>

See also www.w3.org/TR/SVG/masking.html#ClippingPaths

Masking

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



Last modified: Tuesday, 10-Dec-2019 21:39:49 CET
© carto:net (andreas neumann & andré m. winter)
original URL for reference: https://old.carto.net/papers/svg/samples/clipmask.shtml