我可以將動畫SVG呈現給Canvas嗎？

Question

我想創建一個SVG動畫，但將其呈現給Canvas。我知道CanVG，但我不確定它是否滿足我的需求：在Canvas div中顯示使用javascript動畫的SVG元素，而不是「原生」SVG窗口。當我查看CanVG示例代碼時，它似乎指向一個SVG文件，而不是使用屬於同一個文件的一部分的SVG代碼，它被javascript實時處理。任何幫助？

Answer 1

前段時間我也遇到過這個問題，並且嘗試了上面提到的所有可能性，遺憾的是沒有結果。經過一番研究，我發現了一種將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

Answer 2

有幾個庫（如CanVG）只是將SVG變成Canvas繪圖命令。動畫不會幫助你。對於動畫，你將不得不自己做。您可以嘗試使用CanVG在畫布上繪製SVG，因爲它正在進行動畫製作，使用計時器更新畫布，但這非常麻煩，除非瀏覽器還支持SVG，否則無法完成此操作（並且如果是這樣，爲什麼會你想這樣做嗎？）

如果你想實時操作 SVG，你將不得不堅持使用SVG。否則，你需要滾動全部你自己的狀態和畫布上的交互性。那裏沒有捷徑[1]，對不起。

[1]好吧，有幾個用於畫布對象交互的庫，允許您使用SVG對象作爲它們的對象，比如fabric.js。但取決於你想要的，這可能遠遠不夠。