使用Snap.svg沿着路径放置和旋转svg元素

时间:2014-11-25 16:40:23

标签: javascript svg snap.svg

我一直在尝试使用snap.svg和我在javascript中对svg操作的新手,所以请耐心等待:)

我创造了一条路径,我将其他形状放在一起。放置工作正常,但我喜欢我放置的形状总是直接指出,使对象的角度与路径所采用的任何路线对齐。可以把它想象成沿着svg路径放置文本,让每个角色随路径弯曲,朝外或朝内。

任何帮助都会很棒。

1 个答案:

答案 0 :(得分:1)

如果您使用Snaps getPointAtLength()方法(docs),您会发现返回对象中包含的是' alpha'。

Alpha会随着路径的变化而变化,因此您可以将元素设置为以返回的alpha值旋转(您可能需要将其偏移90度或其他值)。

因此,在完全未经测试的代码中,它看起来像......

 myPoint = myShape.getPointAtLength( lengthSoFarInPath ) 
 myShape.transform('t' + myPoint.x + ',' + myPoint.y + 'r' + myPoint.alpha)