demo · v131

arrow markers + paint servers from a shared file

The flow diagram below draws its arrowheads with marker-end pointing at an external SVG (markers.svg). Switch the dropdown to swap arrowheads for the whole canvas — no other SVG content changes. The fill of one shape is also served from the external file via fill: url(./markers.svg#hatch).

source transform sink

the api

/* CSS marker reference to external SVG */
.flow { marker-end: url(./markers.svg#solid); }

/* SVG attribute reference also works */
<path marker-end="url(./markers.svg#solid)"/>

/* fill paint server from external SVG */
.bg { fill: url(./markers.svg#hatch); }

see also