Proposals/Marker children

From SVG

This is a proposal to allow markers to be placed at specific positions along a path with an element in the DOM that can have event listeners registered on it. For this, we allow the <marker> element to be used as a child of <path>, <line>, <polygon> and <polyline> elements. We add two new attributes:

  • href="#someMarkerElement", which can be used to reference a separately defined marker
  • position="length", which gives the position of the marker on the path

Markers that are children of paths can have their content and other attributes defined inline, like we are proposing for masks and clip-paths, or they can reference another element.

<marker id="m" ...>
  ...
</marker>

<path d="...">
  <marker href="#m" position="20px"/>
  <marker position="50%" markerWidth="..." markerHeight="...">
    <path d="..."/>
  </marker>
</path>

When position="" is specified on a <marker> that is a child of some other element, like a <defs>, then it has no effect. Not sure whether a referencing marker element should support "overriding" attributes/content from the referenced marker, like gradients etc. do.

With pointer-events="painted" or "all" on the <path>, mouse events on the markers will be dispatched to the <marker> elements themselves.

  • Use a name other than "position" since that'll clash with the CSS property. Maybe "offset".