內嵌SVG動畫最佳實踐

什麼是內嵌SVG動畫的方式？我想在路徑上做一些動畫。就像旋轉某個事件一樣，多條路徑上的animateMotion也會由某個事件觸發。內嵌SVG動畫最佳實踐

我將包含指向Dev站點的鏈接：http://www.myradon.net。我正在努力完成以下內容;

當電源插頭連接到母座（現在連接到網站）時，較粗的破折號將從頂部一直延伸到頁面底部（當前可視化）。我在這些虛線上思考路徑動畫（所以速度取決於路徑的長度，並應在上一個結束時開始）。虛線是由jQuery在Ajax調用中插入的十幾個SVG。

有人有一些明智的想法如何處理這個？ SMIL，Raphael/D3.js（SVG已經在DOM中）？編輯：順便說一句，我不關心IE8和更少。

來源

2013-03-03 myradon

Javascript驅動的動畫將爲您提供對所有瀏覽器的支持，並且使用諸如d3.js或raphaël這樣的庫很容易（這裏有大量可用於在線獲取這些庫的示例）。

根據您需要多少交互性，您可以使用SVG動畫（SMIL）並提供諸如FakeSMILe（用於IE）的js後備。如果圖形大部分由簡單的動畫組成，而沒有太多的交互，這種方式可能更有意義，因爲使用圖形編輯器以這種方式編輯圖形會更容易。

來源

2013-03-04 10:19:51

好吧！它將主要是簡單的動畫旋轉，發光，某些事件觸發的animateMotion。我不在乎舊版瀏覽器。這將是個人項目，所以擰他們。與拉斐爾的內聯SVGs相互作用也很容易嗎？我只能找到你首先定義一個紙張對象然後向該對象添加一些SVG形狀的例子。我的畫布已經定義好了，我的路徑已經全部定義好了。它們已經存在於DOM中。 – myradon 2013-03-05 20:01:56

我不認爲它會很容易地與Raphaël一起工作，但我可能是錯的。我見過的大部分內容假設你使用Raphaël的API來創建SVG。另一方面D3應該可以正常工作，因爲你可以選擇你想要的元素並根據某些事件對它們進行轉換。 – 2013-03-06 12:11:55

好的。我目前正在抨擊如何將這些庫與SMIL結合起來。 D3.js或Raphael API不會向我顯示任何重新組裝animetMotion的內容。由於響應和代碼（少數MQ的SVG）越來越混亂，我也使用不同的SVG與MQ。 – myradon 2013-03-07 12:53:51

內嵌SVG動畫最佳實踐

回答

相關問題