HTML SVG行并在javascript中应用转换来更改x1 y1属性
我有一个SVG行，它在5秒后接收新的x1 y1 coorindates。如何将过渡应用于直线，使其平滑移动。在所附的代码中，我可以通过平滑过渡来改变它的颜色，但位置会从一个点闪烁到另一个点HTML SVG行并在javascript中应用转换来更改x1 y1属性,svg,line,transitions,Svg,Line,Transitions,我有一个SVG行，它在5秒后接收新的x1 y1 coorindates。如何将过渡应用于直线，使其平滑移动。在所附的代码中，我可以通过平滑过渡来改变它的颜色，但位置会从一个点闪烁到另一个点 <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/htm
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<head>
</head>
<body>
<script language="JavaScript">
setInterval(function trackuser ()
{
var x_one = 45;
var y_one = 13;
var r_one = 50;
var x_two = 55;
var y_two = 85;
var r_two = 36;
var x_thr = 70;
var y_thr = 35;
var r_thr = 28;
var first = (-Math.pow(x_two,2)+Math.pow(x_thr,2)-Math.pow(y_two,2)+Math.pow(y_thr,2)+Math.pow(r_two,2)-Math.pow(r_thr,2))/(-2*y_two+2*y_thr);
var secon = (-Math.pow(x_one,2)+Math.pow(x_two,2)-Math.pow(y_one,2)+Math.pow(y_two,2)+Math.pow(r_one,2)-Math.pow(r_two,2))/(-2*y_one+2*y_two);
var third = ((2*x_one-2*x_two)/(-2*y_one+2*y_two))-((2*x_two-2*x_thr)/(-2*y_two+2*y_thr));
var x = (first-secon)/third;
var y = ((2*x_one-2*x_two)/(-2*y_one+2*y_two))*x+secon;
document.getElementById("line").setAttribute("x2", x+'%');
document.getElementById("line").setAttribute("y2", y+'%');
document.getElementById("line").style.stroke = "blue";
document.getElementById("line").style.WebkitTransition = "all 2s"; // Code for Safari 3.1 to 6.0
document.getElementById("line").style.transition = "all 2s"; // Standard syntax
},5000);
</script>
<div>
<svg height="100%" width="100%" style="position:absolute; top:0%; left:0%">
<line id="line" x1="45%" y1="13%" x2="55%" y2="70%" style="stroke:rgb(255,0,0);stroke-width:3"></line>
</svg>
</div>
</body>
</html>
设置间隔（函数trackuser（）
{
var x_one=45；
变量y_one=13；
var r_one=50；
var x_two=55；
var y_two=85；
var r_two=36；
var x_thr=70；
变量y_thr=35；
var r_thr=28；
var first=（-Math.pow（x_-two，2）+Math.pow（x_-thr，2）-Math.pow（y_-two，2）+Math.pow（r_-two，2）-Math.pow（r_-thr，2））/（-2*y_-two+2*y-thr）；
var secon=（-Math.pow（x_-one，2）+Math.pow（x_-two，2）-Math.pow（y_-one，2）+Math.pow（r_-one，2）-Math.pow（r_-two，2））/（-2*y_-one+2*y-two）；
第三个变量=（（2*x_1-2*x_2）/（-2*y_1+2*y_2））-（（2*x_2-2*x_thr）/（-2*y_2+2*y_thr））；
var x=（第一秒）/第三秒；
变量y=（（2*x_1-2*x_2）/（-2*y_1+2*y_2））*x+secon；
document.getElementById（“line”）.setAttribute（“x2”，x+'%”）；
document.getElementById（“line”）.setAttribute（“y2”，y+“%”）；
document.getElementById（“line”）.style.stroke=“蓝色”；
document.getElementById（“line”）.style.WebkitTransition=“all 2s”//Safari 3.1到6.0的代码
document.getElementById（“line”）.style.transition=“all 2s”//标准语法
},5000);