Animation 我可以将动画SVG渲染到画布吗？

我想创建一个SVG动画，然后将其渲染到画布。我知道CanVG，但我不确定它是否能满足我的需要：在Canvas div中显示使用javascript动画的SVG元素，而不是“本机”SVG窗口。当我查看CanVG示例代码时，它似乎指向一个SVG文件，而不是使用同一文件中的SVG代码&由javascript实时操作。有什么帮助吗？

有几个库（如CanVG）只将SVG转换为画布绘图命令。他们在动画方面帮不了你多少忙

对于动画，你必须自己做。您可以尝试使用CanVG在画布上绘制SVG动画，使用计时器更新画布，但这非常混乱，除非浏览器也支持SVG，否则无法完成（如果支持，为什么要这样做？）

如果您想实时操作SVG，就必须正确使用SVG。否则，您需要在画布上滚动所有您自己的状态和交互性。没有捷径[1]，对不起

---

[1] 还有一些用于画布对象交互的库，允许您使用SVG对象作为其对象，例如fabric.js。但取决于你想要什么，这可能远远不够。

不久前我也遇到了这个问题，并尝试了上面提到的所有可能性，不幸的是没有结果。经过一些研究，我发现了一种将SVG注入画布的方法，只需付出一点痛苦和额外的工作就可以了。因此，解决方案是定义svg元素，然后将其推送到数组中，然后将svg渲染为图像

下面是一段简短的代码片段：

SVG部分：

var data=“data:image/svg+xml，”+
"" +
"" +
"" +
“+字母[pos]+”+
"" +
"" +
"";
字符。推送（数据）；

和JS部分：

var letters=[…]//一组字符
var images=新数组（字母.length）；
对于（变量i=0；i

---

您可以在此处查看全部源代码：

谢谢您的输入。我来看看Fabric.js！在寻找了一种实现我需要的方法之后，我相信我已经找到了一种只使用Canvas命令来实现我的需要的方法&将SVG排除在我的项目的这一部分之外。尽管如此，我还是很高兴收到输入，并将学习这里发布的示例。感谢您的回答，它是否在SVG上启用了硬件加速？我不确定是否有SVG硬件加速这样的事情。