Question

我想创建一个SVG动画，然后将其渲染到Canvas。我知道CanVG，但我不确定它是否符合我的要求：在Canvas div中使用javascript动画显示SVG元素，而不是“本机”SVG窗口。当我查看CanVG示例代码时，它似乎指向一个SVG文件，而不是使用属于同一文件的SVG代码，＆amp;通过javascript实时操纵。有什么帮助吗？

Answer 1

有几个库（如CanVG）只是将SVG转换为Canvas绘图命令。他们对动画没有多大帮助。

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

如果你想实时操纵 SVG，你将不得不坚持使用SVG。否则，您需要在画布上滚动所有您自己的状态和交互性。没有捷径[1]，对不起。

[1]嗯，有一些用于canvas对象交互的库允许您使用SVG对象作为其对象，例如fabric.js。但是根据你想要的东西，这可能还远远不够。

Answer 2

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

以下是一段简短的代码段：

SVG 部分：

var data = "data:image/svg+xml," +
    "<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'>" +
        "<foreignObject width='100%' height='100%'>" +
            "<div xmlns='http://www.w3.org/1999/xhtml' style='font: bold 160px Myriad Pro, Arial, Helvetica, Arial, sans-serif'>" +
                "<span style='color:rgb(32,124,202); opacity: 0.8; -webkit-text-stroke-color: white; -webkit-text-stroke-width: 2px'>" + letters[pos] + "</span>" +
             "</div>" +
            "</foreignObject>" +
    "</svg>";
characters.push(data);

和 JS 部分：

var letters = [...] // a pool of characters 
var images = new Array(letters.length);

for (var i=0; i< letters.length; i++) {
    var textPosition = WIDTH/2 - (letters.length * CHAR_DISTANCE)/2;
    var txt = new Text(letters[i], textPosition + (i*CHAR_DISTANCE), HEIGHT/2,
    (Math.random() * 3) + 5 , (-Math.random() * 10) + 5);
    images[i] = new Image();
    images[i].src = characters[i];
    textArray.push(txt);
}

您可以在此处查看完整的源代码：http://hellopixel.net/experiments/404/404.html

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

2 个答案: