我有一个像这样的 SVG 路径:
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" baseProfile="full">
<path d="M47.16,66.38c0.62,1.65-0.03,2.93-0.92,4.28c-5.17,7.8-8.02,11.38-14.99,18.84c-2.11,2.25-1.5,4.18,2,3.75c7.35-0.91,28.19-5.83,40.16-7.95" style="fill:none;stroke:black;stroke-width:2" />
</svg>
我可以渲染路径,但似乎无法找到使路径具有动画效果的方法,使其看起来像用铅笔“绘制”一样。 animate
节点适用于单个坐标,但不适用于路径。
我最终会在带有解析器或 UIWebView 的 iPhone 应用程序中使用此动画。
最佳答案
尝试为 'stroke-dashoffset' 设置动画(请注意,您需要与之匹配的 'stroke-dasharray'),请参阅 this example .需要计算才能成功使用它的路径长度可以通过如下脚本获取:
var pathlength = yourPathElm.getTotalLength()
在 example 上查看源代码看看它是如何完成的。
关于ios - 如何在 IOS 中为 SVG 路径设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5924238/