javascript - 如何更改 SVG 线条的属性？

Question

有两条线“LongLine”和“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>

我想更改“ShortLine”的属性。 “ShortLine”的 Angular 必须相同，但比“LongLine”短。 “ShortLine”的属性可以是例如如下 (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>

换句话说，“LongLine”的 x1、y1、x2、y2 和“ShortLine”的 x1、y1 是已知的。
想要的是“ShortLine”的x2，y2，但两条线的 Angular 保持不变。

这是我的错误方法:https://jsfiddle.net/rmLdm15z/8/

提前致谢。

Answer 1

试试这个:

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>

作为一般准则，您始终可以通过控制台查看对象为您提供的所有属性。例如，console.log(shortLine.y1) 是您发现可以设置 baseVal.value 的方式。