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](https://svg.tutorial.aptico.de/start3.php?knr=10&kname=Pfade&uknr=10.9&ukname=Pfeilspitzen%20-%20das%20marker-Element) SVG-Tutorial für Pfeilspitzen gefunden, aber spezialiert für polyline, bei line funktioniert es nicht (Pfeilspitze wird ignoriert): ~~~js // 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

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](https://svg.tutorial.aptico.de/start3.php?knr=10&kname=Pfade&uknr=10.9&ukname=Pfeilspitzen%20-%20das%20marker-Element) SVG-Tutorial für Pfeilspitzen gefunden, aber spezialiert für polyline, bei line funktioniert es nicht (Pfeil wird nicht gezeigt): ~~~js // 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

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](https://svg.tutorial.aptico.de/start3.php?knr=10&kname=Pfade&uknr=10.9&ukname=Pfeilspitzen%20-%20das%20marker-Element) SVG-Tutorial für Pfeilspitzen gefunden, aber spezialiert für polyline, bei line funktioniert es nicht (Pfeil wird nicht gezeigt): ~~~js // 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. `<svg style="z-index:-5"` hilft nicht, SVG bleibt vorne. Gruß, 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](https://svg.tutorial.aptico.de/start3.php?knr=10&kname=Pfade&uknr=10.9&ukname=Pfeilspitzen%20-%20das%20marker-Element) SVG-Tutorial für Pfeilspitzen gefunden, aber spezialiert für polyline, bei line funktioniert es nicht (Pfeil wird nicht gezeigt): ~~~js // 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" ); ~~~ Gruß, 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](https://svg.tutorial.aptico.de/start3.php?knr=10&kname=Pfade&uknr=10.9&ukname=Pfeilspitzen%20-%20das%20marker-Element) SVG-Tutorial für Pfeilspiten gefunden, aber spezialiert für polyline, bei line funktioniert es nicht (Pfeil wird nicht gezeigt): ~~~js // 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" ); ~~~ Gruß, Linuchs