javascript - SVG find orientation(angle) of a point to the x axis on a path -


i making parallax moving object on path , working fine getpointatlength() need rotate object path.

i need getpointatlength() angles angle of point. rapheal seems have method isn't friendly svg elements created in html or don't know how deal it. ideas?

var l = document.getelementbyid('path'); var element=$('#svg_26') $(window).scroll(function(){     var pathoffset=parseint($('#l1').css('stroke-dashoffset'));     var p = l.getpointatlength(-1*pathoffset);     translation = 'translate('+p.x+'px,'+p.y+'px)'     $(element).css('transform',translation); }) 

getpointatlength in raphael returns object attribute 'alpha'. alpha angle need along curve. in example above p.alpha

so should able apply rotation object rotated p.alpha,

eg..

myraphelement.transform('t' + p.x + ',' + p.y + 'r' + p.alpha).

the last part rotate element around center.

if can't create raph element svg inline, suspect may better off library snap.svg (which has same commands same author), or possibly dynamically rotate css transform using 'rotate('+l.alpha+','+l.x+','+l.y+')'

edit: misread had raphael in tags, when not being used.

i use snap case, raphael doesn't add lot here. possibly create raphael element off screen same path inline element use angle, feels overkill load library that.

in snap access element with..

myelement = snap('#svg_26') p = myelement.getpointatlength(-1*pathoffset);     myelement.transform('t' + p.x + ',' + p.y + 'r' + p.alpha) 

Comments