如您所见,我是使用svg的新手,而且在连接点时遇到问题。
我想做的是将这2个点用一条线连接起来,无论它们的位置如何。
正如您在图像波纹管中看到的那样,当我将cx =“ 50”更改为cx =“ 510”时,该线仍然位于同一位置,但是无论位置如何,我都希望该线“跟随”第二个圆。
恢复:
在我的情况下,我有一条静态线,当我更改坐标(cx或cy)时,我希望它有一条与其他点连接的动态线。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<svg width="1000" height="1000">
<circle id="circle0" cx="50" cy="50" r="20" stroke="black" stroke-width="3" fill="grey" onClick="dotClick(0)"></circle>
<circle id="circle1" cx="50" cy="110" r="20" stroke="black" stroke-width="3" fill="grey" onClick="dotClick(1)"></circle>
<line id="line0" x1="50" y1="50" x2="50" y2="100" />
</svg>
<script>
var buttons = {};
function dotClick(width) {
(width === 0) ? buttons.one = !buttons.one : buttons.two = !buttons.two;
document.getElementById("line0").setAttribute("stroke", (buttons.one && buttons.two) ? "red" : "");
document.getElementById("circle0").setAttribute("fill", (buttons.one ? "red" : "grey"));
document.getElementById("circle1").setAttribute("fill", (buttons.two ? "red" : "grey"));
}
</script>
</body>
</html>
也要达到预期的变化x2
<line id="line0" x1="50" y1="50" x2="510" y2="100" />
Codepen- https: //codepen.io/nagasai/pen/NjabQJ
更新了动态行的代码笔
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句