SVG: Linie mit Pfeilspitze versehen / Problem mit z-index

[Linuchs]

Moin,

ich habe Rechtecke, die per Pfeil verbunden werden sollen (Elter zu Kind), die SVG-line habe ich schon, aber wie bekomme ich Pfeile dran?

Habe hier SVG-Tutorial für Pfeilspitzen gefunden, aber spezialiert für polyline, bei line funktioniert es nicht (Pfeilspitze wird ignoriert):

// SVG Pfeilspitze
document.write( `
  <marker id="pf1"
    viewBox="0 0 10 10" refX="0" refY="5"
    markerUnits="strokeWidth"
    markerWidth="15" markerHeight="15"
    orient="auto">
    <path d="M 0,0 l 10,5 l -10,5 z" />
  </marker>
` );

...

document.write( "<line x1='"+xElter+"' y1='"+yElter+"' x2='"+xKind+"' y2='"+yKind+"' style='stroke:#f00;stroke-width:1;' marker-end='url(#pf1)' \/>\n" );

noch'n Problem:

Die SVG-Grafik muss später erzeugt werden als die Rechtecke, also liegt die Grafik darüber und die Links können nicht angeklickt werden.

position:absolute;z-index:-5; hilft nicht, SVG bleibt vorne.

Gruß, Linuchs