javascript – SVG在路径上找到点到x轴的方向(角度)

我通过在路径上移动一个对象来制作视差,并且它与getPointAtlength()一起正常工作但我还需要使用路径旋转此对象.

我需要像getPointAtLength()这样的东西,但对于角度,我得到了点的角度. Rapheal似乎有一个方法,但它对hv中创建的svg元素不友好,或者我不知道如何处理它.有任何想法吗？

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);
})

解决方法:

Raphael中的getPointAtLength返回一个属性为’alpha’的对象. Alpha是曲线所需的角度.在上面的例子中,它将是p.alpha

所以你应该能够对由p.alpha旋转的对象应用旋转,

例如..

myRaphElement.transform(‘t’p.x’,’p.y’r’p.alpha).

最后一部分将围绕其中心旋转元素.

如果你不能创建raph元素本身,因为svg是内联的,我怀疑你可能会更好的使用像Snap.svg这样的库(它的命令与同一作者大致相同),或者你可以通过css动态旋转使用’rotate(‘l.alpha’,’lx’,’ly’)之类的东西进行转换

编辑：我误读了标签中的拉斐尔,当它没有被使用时.

我个人会在这种情况下使用Snap,因为拉斐尔并没有在这里增加太多.您可以在屏幕外创建一个Raphael元素,其路径与内联元素相同,只是为了使用该角度,但为此加载库感觉有些过分.

在Snap中你可以用..访问元素

myElement = Snap('#svg_26')
p = myElement.getPointAtLength(-1*pathOffset);    
myElement.transform('t' + p.x + ',' + p.y + 'r' + p.alpha)

标签：javascript,svg,css-transitions,raphael
来源： https://codeday.me/bug/20190727/1557456.html