Wie kann ich die Attribute einer SVG-Linie ändern?

Question

Es gibt zwei Zeilen "LongLine" und "ShortLine".

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> 
 
<line id="LongLine" x1="20" y1="350" x2="350" y2="50" stroke-width="2" stroke="black"/> 
 
<line id="ShortLine" x1="20" y1="350" x2="0" y2="0" stroke="#ff00ff" stroke-width="10" /> 
 
</svg>

Ich möchte die Attribute von "ShortLine" ändern. Die "ShortLine" muss den gleichen Winkel haben, ist aber kürzer als "LongLine". Die Attribute von "ShortLine" könnten z.B. wie folgt (x1 = "20" y1 = "350" x2 = "185" y2 = "200").

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"> 
 
<line id="LongLine" x1="20" y1="350" x2="350" y2="50" stroke-width="2" stroke="black"/> 
 
<line id="ShortLine" x1="20" y1="350" x2="185" y2="200" stroke="#ff00ff" stroke-width="10" /> 
 
</svg>

Mit anderen Worten x1, y1, x2, y2 von "Longline" und x1, y1 von "SHORT" bekannt sind.
Gesucht werden die x2, y2 von "ShortLine", aber damit bleibt der Winkel beider Linien gleich.

Hier ist mein falscher Ansatz: https://jsfiddle.net/rmLdm15z/8/

Vielen Dank im Voraus.

Answer 1

Try this:

var shortLine = document.getElementById('ShortLine') 
shortLine.y1.baseVal.value = 500 

console.log(shortLine) 
// Gives us: 
// <line id="ShortLine" x1="20" y1="500" x2="185" y2="200" stroke="#ff00ff" stroke-width="10"></line> 

Als allgemeine Richtlinie, Sie immer alle Eigenschaften ein Objekt anzeigen können Sie über die Konsole gibt. Zum Beispiel, console.log(shortLine.y1) ist, wie Sie feststellen, dass Sie baseVal.value einstellen können.