How can I change the attributes of a SVG line?

Question

There are two lines "LongLine" and "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>

I want to change the attributes of "ShortLine". The "ShortLine" must have the same angle, but it is short than "LongLine". The attributes of "ShortLine" could be e.g. as follows (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>

In other words x1, y1, x2, y2 of "LongLine", and x1, y1 of "ShortLine" are known.
Wanted are the x2, y2 of "ShortLine", but so that the angle of both lines remains the same.

Here is my wrong approach:https://jsfiddle.net/rmLdm15z/8/

Thanks in advance.

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>

As a general guideline, you can always view all the properties an object gives you through the console. For example, console.log(shortLine.y1) is how you find that you can set baseVal.value.