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

【问题标题】：Placing and rotating svg elements along a path with Snap.svg使用 Snap.svg 沿路径放置和旋转 svg 元素
【发布时间】：2014-11-25 16:40:23
【问题描述】：

我一直在尝试 snap.svg，而且我是 javascript 中 svg 操作的新手，所以请耐心等待 :)

我创建了一条路径，我将沿着它放置其他形状。放置效果很好，但我希望放置的形状始终直指，使物体的角度与路径所采用的任何路线对齐。可以把它想象成沿着 svg 路径放置文本，让每个字符随着路径弯曲，朝外或朝内。

任何帮助都会很棒。

【问题讨论】：

【解决方案1】：

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

Alpha 随路径而变化，因此您只需将元素设置为以返回的 Alpha 值旋转（您可能需要将其偏移 90 度或其他值）。

所以在完全未经测试的代码中，它看起来像......

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

【讨论】：

谢谢！您的解决方案非常适合获得正确的旋转。我不确定如何使用偏移量，现在我的对象以我想要的方式旋转，但是在获取 .getPointAtLength() 时，它的位置在不同距离处与路径偏移。您对此有什么建议吗？
如果有距离偏移，您可以通过向 myPoint.x/y 添加偏移量来补偿，例如 20 和 -10 来定位它，如果需要，还可以为 alpha 添加偏移量。
感谢所有快速回复，您真的帮了大忙。我玩过偏移量，但似乎无法理解如何计算它们。我对我的实验做了一些小改动jsfiddle.net/spellfork/9Lxaqjmc如果你有时间，也许你可以看看。我希望我的三角形沿着路径滑动并始终指向外部，但仍将其底部与路径线接触。
这开始变得更加复杂，因为您想要旋转对象的点不在中心。因此，您可能需要将原始三角形点调整为沿 x,y 坐标更远。有一些方法可以转换路径，例如 Snap.path.map，但这可能是一个单独的问题并且涉及更多。首先尝试调整三角形以获得不同的坐标。
感谢所有帮助。我会尝试调整三角形的坐标。我有一个想法，将我的三角形与另一个更大的物体组合在一起，三角形底边与该物体的中心点对齐。我试试看。