Hallo Linuchs,
ein Tutorial dazu haben wir auch.
Grundsätzlich funktioniert das so, wie Du es machst. Ich habe ein Fiddle dazu gebaut. Wenn es bei Dir nicht funktioniert, ist noch was anderes faul, was man an deinem Posting nicht ablesen kann. Hast Du eine Demo-Seite damit online?
Die Nummer mit vorne/hinten und z-index, müsste ich mir live anschauen. Mit Stapelkontexten kann man schon mal durcheinander kommen.
Ob document.write der richtige Weg ist, darüber kann man streiten. Ich würd's nicht tun, sondern per Script die Elemente per API erzeugen und dann passend ins SVG einhängen.
Das geht mit document.createElementNS("http://www.w3.org/2000/svg", "line")
- die Normalvariante ohne NS würde ein HTMLUnknownElement erzeugen. Aber mit Namespace bekommst Du ein SVGLineElement (Wiki-Artikel).
Stroke und Stroke-Width sind übrigens eigene Attribute des line Elements, die kannst Du, musst Du aber nicht per CSS definieren. Und wenn per CSS, dann am Besten über's Stylesheet. Gib der line eine Klasse, z.B. Arrow, und schreibe ins Stylesheet
line.arrow {
stroke: black;
stroke-width: 2;
marker-end: url(#pf1);
}
Dann brauchst Du im DOM nur noch <line class="arrow" x1="..." y1="..." x2="..." y2="..." />
Links kann man übrigens auch als ForeignObject ins SVG einbauen:
<svg>
<foreignObject class="link" x="200" y="100">
<a href="...">Klick</a>
</foreignObject>
</svg>
foreignObject.link {
width: 1px; height: 1px;
overflow: visible;
}
foreignObject.link a {
padding: 0.5em 1em; /* Beispielsweise */
border: 1px solid red;
}
Das hat den Vorteil, dass die Koordinaten des a-Elements basierend auf der Viewbox des SVG bestimmt werden. Es hat den Nachteil, dass seine Größe ebenfalls auf dieser Basis bestimmt wird, d.h. wenn das SVG sich vergrößert oder verkleinert, wächst oder schrumpft das a Element mit.
Die Größe des foreignObject auf 1x1 zu setzen und mit overflow:visible den Inhalt einfach hinaushängen zu lassen, ist ein Trick, den ich bei StackOverflow gefunden habe. Eine automatische Größenfestlegung des foreignObject basierend auf dem Inhalt gibt's nicht, und wenn Du es einfach "auf Vorrat" zu groß machst, dann könnte es andere Links überlappen.
Rolf
sumpsi - posui - obstruxi