如何更改 SVG 线的属性？

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 eg 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 .

Answer 2

One way is to calculate the unit vector u given by the points (x1, y1) and (x2, y2) of the "LongLine", then add it to (x1, y1) multiplied by the desired size of the "ShortLine", call it short_d .

const dx = x2 - x1
const dy = y2 - y1
const d = Math.sqrt(dx * dx + dy * dy)
const ux = dx / d
const uy = dy / d

const shortLine = document.getElementById('ShortLine')
shortLine.setAttribute('x1', `${x1}`)
shortLine.setAttribute('y1', `${y1}`)
shortLine.setAttribute('x2', `${x1 + short_d * ux}`)
shortLine.setAttribute('y2', `${y1 + short_d * uy}`)

Take a look on Vector algebra .