SVG marker
Syntax
<markerviewBox="x y width height" refX="xoffset" refY="yoffset" orient="orientation" ... optional parameters>- ...elements drawing the marker...
</marker>- <elementname marker-start="url(#markerid)"/> applies a marker to the start of an element
- <elementname marker-mid="url(#markerid)"/> applies a marker to the middle of a segment of an element
- <elementname marker-end="url(#markerid)"/> applies a marker to the end of an element
- Markers can be applied to the
<line>,<polyline>,<polygon>and<path>elements
Parameters
| Parameter | Details |
|---|---|
| viewBox | Specifies the unit system for the elements that draw the marker |
| refX | Distance the x axis of the coordinate system for drawing the marker should be offset from the default drawing point. Defaults to 0. |
| refY | Distance the y axis of the coordinate system for drawing the marker should be offset from the default drawing point. Defaults to 0. |
| orient | Values are auto or angle in degrees and specifies the rotation applied to the marker. It is applied after all other coordinate adjustments are made (viewBox, preserveAspectRaio and refX, refY). Defaults to 0. Calculation of the angle for auto is complex - see the SVG spec for details. |
| markerUnits | strokeWidth or userSpaceOnUse. Defaults to strokeWidth. |
| markerWidth | Width of the marker in markerUnits. Defaults to 3. |
| markerHeight | Height of the marker in markerUnits. Defaults to 3 |
Remarks
Scripting: rendered marker elements are not exposed in the DOM, so it is impossible to adjust properties or elements for specific rendered markers (although it's completely possible to script the defined marker element).
The overflow property of the marker element is automatically set to hidden. This is what clips any drawing that overflows the marker tile. This can be explicitly set to visible in CSS. As of July 2016, Chrome does not support markers with overflow: visible - but a workaround is to set a filter on the marker element - which seems to disable the overflow clipping.
Filters can be applied to elements within a marker. Although not explicitly permitted in the spec, filters also seem to work when specified on the marker element itself.
For more details on the marker element, please see the marker section in the SVG 1.1 spec.
