|
|
Donner SVG Editor & Engine
SVG-native editor and embeddable SVG2 + CSS3 engine in C++20, with GPU (WebGPU) and compact CPU renderers, built for correctness, security, and performance.
|
Creates a marker element that can be used to define graphical objects that can be used repeatedly in a drawing, such as arrowheads or other markers on paths.
A <marker> is a reusable mini-graphic that SVG automatically stamps at the vertices of a path or other shape - the classic example is an arrowhead at the end of a line. You define the marker's geometry once (typically inside <defs>), give it an id, and then attach it to a shape through the marker-start, marker-mid, or marker-end CSS properties (or the shorthand marker). SVG draws one copy of the marker at each relevant vertex, automatically rotating it to follow the path's direction when orient="auto".
Use <marker> for arrowheads on connectors, dots or ticks at polyline vertices, direction indicators on graph edges, and similar repeated vertex decorations.
| Attribute | Default | Description |
|---|---|---|
| viewBox | (none) | A list of four numbers (min-x, min-y, width, height) separated by whitespace and/or a comma, that specify a rectangle in userspace that should be mapped to the SVG viewport bounds established by the marker. |
| preserveAspectRatio | xMidYMid meet | How to scale the viewport to fit the content. Only applies if viewBox is specified. |
| markerWidth | 3 | Width of the marker viewport. |
| markerHeight | 3 | Height of the marker viewport. |
| markerUnits | strokeWidth | Coordinate system for marker size and contents: strokeWidth or userSpaceOnUse. |
| refX | 0 | X coordinate for the reference point of the marker, where the marker is centered. |
| refY | 0 | Y coordinate for the reference point of the marker, where the marker is centered. |
| orient | 0 | Orientation of the marker relative to the path. Supported values: auto, auto-start-reverse, or an angle for a fixed rotation such as 45deg or 3.14rad. |