5

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

4

2 回答 2

5

前段时间我也遇到过这个问题，并尝试了上面提到的所有可能性，不幸的是没有结果。经过一番研究，我找到了一种将 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);
}

您可以在这里查看整个源代码：https ://esimov.com/experiments/javascript/404/

于 2012-09-08T05:18:19.580 回答
2

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

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

如果您想实时操作SVG，您将不得不正确使用 SVG。否则，您需要在画布上滚动您自己的所有状态和交互性。那里没有捷径[1]，抱歉。

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

于 2012-09-08T03:43:08.773 回答