There are two lines "LongLine" and "ShortLine".

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="">
<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>

There are two lines "LongLine" and "ShortLine".

<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3/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/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/rmLdm15z/8/

Thanks in advance.

• javascript
• html
• svg

Share Improve this question Follow edited Jan 25, 2017 at 15:47 user3815508 asked Jan 25, 2017 at 15:40 user3815508user3815508 39966 silver badges2020 bronze badges 2

• do you want the slope of short line to be same as that of long line ? – Mitesh Pant Commented Jan 25, 2017 at 15:43
• Yes, the angle and slope of both lines should remain the same. – user3815508 Commented Jan 25, 2017 at 15:51

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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.

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.