HTML SVG Line and applying transition to change in x1 y1 attributes in javascript -
i have svg line after 5 seconds receives new x1 y1 coorindates. how apply transition line smoothly moves. in code attached, i'm able change it's color through smooth transition, location blinks 1 spot other.
<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 safari 3.1 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>
you can't (yet) animate coordinates css. going have animate them js. either manually (eg. requestanimationframe, or timeout), or use 1 of svg javascript libraries.
Comments
Post a Comment