SVG marker

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Insert
> Step 2: And Like the video. BONUS: You can also share it!

Syntax

  • <marker viewBox="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

ParameterDetails
viewBoxSpecifies the unit system for the elements that draw the marker
refXDistance the x axis of the coordinate system for drawing the marker should be offset from the default drawing point. Defaults to 0.
refYDistance the y axis of the coordinate system for drawing the marker should be offset from the default drawing point. Defaults to 0.
orientValues 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.
markerUnitsstrokeWidth or userSpaceOnUse. Defaults to strokeWidth.
markerWidthWidth of the marker in markerUnits. Defaults to 3.
markerHeightHeight 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.



Got any SVG Question?