Wie zeichne ich eine Linie mit Markerköpfen mit bestimmten Koordinaten?

Question

Ich habe 2 Arrays, die x- und y-Koordinaten darstellen.

x = [700, 20, 149.86844382503568, 489.86844382503574, 910.1315561749642, 1250.1315561749643, 1380, 1250.1315561749643, 910.1315561749643, 489.8684438250359, 149.8684438250359] 

y = [700, 700, 300.30602844111826, 53.28156891929564, 53.28156891929552, 300.3060284411182, 699.9999999999999, 1099.6939715588817, 1346.7184310807042, 1346.7184310807045, 1099.693971558882] 

Ich muss Linien mit Markerköpfen zwischen diesen Koordinaten zeichnen. Zum Beispiel muss eine Linie zwischen x [1] y [2] und x [3] y [5] mit dem Marker vorhanden sein. Ich habe weit gesucht, konnte das aber nicht machen.

Es ist das Beispiel:

how to use an arrow marker on an svg <line> element?

Aber ich brauche in meinem Skript Elemente haben, so dass ich denke, das ist nicht für mich arbeiten. Ich bin ziemlich unerfahren in Javascript so entschuldigen Sie mich, wenn das noobish klingt.

Vielen Dank im Voraus.

Answer 1

wie diese, wo #marker-end das Element für Ihre Marker Ende ist, ist #marker-start das Element für Ihre Markierung Anfang und svg ist die svg, in dem Sie die Zeile hinzufügen möchten.

a=document.createElement('line'); 
a.setAttribute('x1',x[1]); 
a.setAttribute('y1',y[2]); 
a.setAttribute('x2',x[3]); 
a.setAttribute('y2',y[5]); 
a.style.markerEnd='url(#marker-end)'; 
a.style.markerStart='url(#marker-start)'; 
svg.appendChild(a);