從網頁保存動畫 SVG

Question

有一個帶有中文字典的 Internet 站點，它使用動畫向您展示書寫漢字的正確方法。 我不完全確定動畫是如何工作的，但它們似乎是基於 SVG 的。 您可以在此處找到動畫示例：

http://ce.linedict.com/dict.html#/cnen/entry/e1d0a1716f89470d88087dce285914a1

請務必單擊“筆畫”查看動畫。

所以這是我面臨的挑戰：我想知道是否有任何方法可以下載動畫以便離線查看它們。我想這樣做的原因是將它們添加到 Anki，這是我的抽認卡應用程序當我在旅途中（即離線）時在我的 iPad 上使用。

我嘗試在 Firefox 中檢查元素並將元素的內部 HTML 保存為單獨的文件，但這會導致靜態頁面。 在 Safari 中做同樣的事情是不可能的，因為內部 HTML 在渲染動畫時會不斷變化，這讓我認為內部 HTML 是由嵌套在某處的單獨 (?) Java / (?) Jquery 腳本動態渲染的地點。 不幸的是，我對 Java 的了解充其量是初級的，雖然我已經開始了一個在線教程來熟悉代碼，但我認為我需要很長時間才能弄清楚這里發生了什么。 這就是為什么我正在尋求比我更有網頁經驗的你們的幫助。

那么有什么方法可以保存動畫以供離線使用，無論是作為代碼還是 svg / 動畫 gif 文件？ Anki，我正在使用的抽認卡應用程序，它使用 HTML 以類似於 Web 瀏覽器的方式呈現其內容（據我所知，有一些方法可以集成 JavaScript）。

我想我可以使用截屏程序錄制動畫並將其保存為 .gif 文件，但考慮到學習者必須掌握大約 3500-5000 個漢字才能流利使用中文，這需要地獄般的時間，所以我正在尋找可以編寫腳本的東西（我對 Apple Scripting 有一些工作理解，一旦我了解了動畫的工作原理，就可以從我自己那里得到它）。

我將不勝感激任何可以使我更進一步的幫助或建議。

--- 2015-05-23 編輯：

就像我在下面對 Robert 的回復中提到的那樣，我查看了不同條目的 DOM 結構，這次是針對單個字符而不是多字符單詞。 當頁面上的筆順動畫按鈕被激活時，在DOM結構中可以找到如下代碼：

    <input type="hidden" id="hidden_strokeFileName" value="1200爸.swf">

如您所見，似乎引用了基於 Flash 動畫的文件名。 如果動畫確實包含在 .swf 文件中，應該可以下載以供離線使用，對吧？ 但是，我對瀏覽器如何拼接可以找到動畫的 URL 以便我下載它感到困惑。 任何人都可以幫忙嗎？

這是頁面的鏈接：http: //ce.linedict.com/dict.html#/cnen/entry/cca145dd67574395a5a28af08a3afb30

Answer 1

我創建了一個簡單的工具（腳本片段，16 行代碼）： https ://gist.github.com/VityaSchel/bc2a83e330661c2bae580ebb4aab05cf

它使用MutationObserver接口記錄 svg 更改。 我用它來記錄“d”參數的動畫，但你可以修改這個腳本來記錄 svg 結構和屬性的所有變化。

此工具的一個主要問題是它記錄不均勻，因此某些部分可能比其他部分稍慢。

 let recordedChanges = [] let startRecordingSVG = () => { recordedChanges = [] } let stopRecordingSVG = () => { console.log(JSON.stringify(recordedChanges)) } let observer = new MutationObserver(mutationRecords => { for(const record of mutationRecords) { if(record.attributeName === 'd') { recordedChanges.push(record.target.getAttribute('d')) } } }) observer.observe($0, { subtree: true, attributes: true }) /* USAGE */ // 1. Select target svg (or better it's parent, because svg may be overwritten) in Elements panel // 2. Paste this into Console // 3. Paste startRecordingSVG() into console // 4. Do something so animation plays // 5. Paste stopRecordingSVG() into console // 6. An array with all animation keyframes will be printed in JSON format, use it to transform to lottie animation or CSS keyframes

除此之外，我創建了一個函數來將此數組轉換為 CSS 關鍵幀：

 function arrayFramesToCSSKeyframes(array) { let frames = '', i = 1 for(let framePath of array) { const percentage = i/array.length*100 const frameCode = [] frames += ` ${Math.round(percentage)}% {\n` frames += ` d: path("${framePath}");\n` frames += ` }\n\n` i++ } return `@keyframes frames {\n${frames}\n}` }