使用Snap.svg沿路径放置和旋转svg元素
[英]Placing and rotating svg elements along a path with Snap.svg
问题描述
I have been trying out snap.svg and I'm new to svg manipulation in javascript so bear with me :) 
我一直在尝试snap.svg，但是我是javascript中的svg操作的新手，所以请多多包涵:)
I have created a path that I'm placing other shapes along. 我创建了一条放置其他形状的路径。 The placing works fine but I'd like the shapes that I place to always point straight out, getting the angle of the object to align with whatever route the path takes. 放置效果很好，但我希望放置的形状始终直指，使对象的角度与路径所经过的路线对齐。 Think of this as placing text along a svg path, getting each character to bend with the path, facing outwards or inwards. 可以认为这是沿svg路径放置文本，使每个字符朝外或向内弯曲。
Any help would be great. 任何帮助都会很棒。
1 个解决方案
解决方案1
1 已采纳 2014-11-26 07:43:21
If you use Snaps getPointAtLength() method ( docs ) you will find included in the return object is 'alpha'. 如果使用Snaps getPointAtLength（）方法（ docs ），则会发现返回对象中包含的是'alpha'。
Alpha varies as the path does, so you can just set your element to rotate at the value of the returned alpha (you may need to offset it by 90 degrees or something). Alpha随路径的变化而变化，因此您只需将元素设置为以返回的Alpha值旋转（您可能需要将其偏移90度左右）。
So in totally untested code it would look something like... 因此，在完全未经测试的代码中，它看起来像...
myPoint = myShape.getPointAtLength( lengthSoFarInPath )
myShape.transform('t' + myPoint.x + ',' + myPoint.y + 'r' + myPoint.alpha)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.