These three elements are referenced by properties, not drawn on their own:
clip-path="url(#id)", mask="url(#id)" and
marker-start, marker-mid and marker-end. The
explorer checks that each such reference leads to an element of the right kind.
clipPath
Its shapes (path, rect, circle,
ellipse, line, polyline, polygon,
text, and use pointing at one of them) are joined into one
region. What lies outside the region is not shown. Paint on the shapes is ignored:
only their geometry counts, with clip-rule choosing the fill rule, and
anti-aliasing applies at the edge.
clipPathUnits:userSpaceOnUse(the default) uses the user space of the element that refers to it;objectBoundingBoxmakes coordinates fractions of that element’s bounding box.transformon theclipPathitself, andclip-pathon it or on its children, intersect further clips.- A
clipPathwith no children clips away everything.
mask
Its content is drawn into an offscreen picture, and that picture’s luminance (or
its alpha, when mask-type="alpha" or the CSS property says so) times its
opacity becomes the opacity of the masked element. White shows, black hides, grey is
part-way.
| Attribute | Default | Meaning |
|---|---|---|
x, y, width, height | −10%, −10%, 120%, 120% | The mask region. Outside it, the mask is transparent and the element is hidden. |
maskUnits | objectBoundingBox | What those four numbers mean. |
maskContentUnits | userSpaceOnUse | What the units of the mask’s content are. |
mask-type | luminance | SVG 2: luminance or alpha. |
marker
A small graphic stamped at the vertices of a path, line,
polyline or polygon. marker-start is the first
vertex, marker-end the last and marker-mid every one between
(a closed subpath’s start counts as a middle vertex). The shorthand
marker sets all three; it is a CSS property, not an attribute, in SVG 1.1.
| Attribute | Default | Meaning |
|---|---|---|
markerWidth, markerHeight | 3 | The size of the marker viewport, in markerUnits. Zero disables the marker. |
markerUnits | strokeWidth | strokeWidth scales the marker with the line; userSpaceOnUse does not. |
viewBox, preserveAspectRatio | none | The marker’s own coordinate system. |
refX, refY | 0 | The point of the marker that sits on the vertex. |
orient | 0 | An angle, auto (along the path’s direction), or auto-start-reverse (SVG 2: reverses at the start so an arrow points outward at both ends). |
overflow | hidden for markers | Set visible to let the marker draw outside its viewport. |
In SVG 2 a marker’s paint can follow the line with context-fill and
context-stroke values for fill and stroke.
Not described
This page is partial.
- Reference: written without the specification text open. Which child elements a
clipPathmay hold, the exact marker placement at corners and subpath starts, and the CSS Masking properties (mask-image,clip-pathshapes) are not described in full. - Viewer: lists each clip path, mask and marker, and checks that references reach an element of the right kind. It does not compute clip regions, masks or marker positions, and does not draw them.