我可以将动画SVG呈现给Canvas吗？

问题描述：

我想创建一个SVG动画，但将其呈现给Canvas。我知道CanVG，但我不确定它是否满足我的需求：在Canvas div中显示使用javascript动画的SVG元素，而不是“原生”SVG窗口。当我查看CanVG示例代码时，它似乎指向一个SVG文件，而不是使用属于同一个文件的一部分的SVG代码，它被javascript实时处理。任何帮助？我可以将动画SVG呈现给Canvas吗？

环顾四周，找到我需要的方法后，我相信我已经找到了一种方法来完成我的需求，只使用Canvas命令并将SVG从我的项目的这部分中移出。不过，我很高兴收到投入，并将研究这里发布的示例。 – Jackalope

答

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

非常有趣，谢谢！我会看看这个源代码.. – Jackalope

答

有几个库（如CanVG）只是将SVG变成Canvas绘图命令。动画不会帮助你。对于动画，你将不得不自己做。您可以尝试使用CanVG在画布上绘制SVG，因为它正在进行动画制作，使用计时器更新画布，但这非常麻烦，除非浏览器还支持SVG，否则无法完成此操作（并且如果是这样，为什么会你想这样做吗？）

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

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

感谢您的输入。我会看看Fabric.js！ – Jackalope

我可以将动画SVG呈现给Canvas吗？

相关推荐