SVG路徑的顯示速度

我當然希望有人能幫助我。頁面爲http://www.drdelmath.com/sketch_parabola/

問題描述很長，以避免誤解。

當您進入頁面時，屏幕右側將繪製拋物線。請注意它的繪製速度。這就是我想要的一切來在這個頁面上。（這個藍色拋物線只是爲了展示我想要的）

我正在做所有的繪圖與SVG。

頁面上有很多項目需要繪製。但是，用戶/學生要通過點擊按鈕來確定何時顯示項目。這個例子中包含兩個這樣的按鈕。

所有元素都是在您進入頁面時以visibility = hidden繪製的。當學生點擊一個按鈕時，我使用JavaScript爲所需的項目設置可見性=可見。他們被顯示。然而，他們畫得太快了。單擊「繪製拋物線」按鈕，將速度與繪製藍色拋物線時的速度進行比較。

我該如何減慢顯示速度，使其看起來像有人在繪製物品？

或者有沒有辦法延遲執行SVG路徑語句，直到學生單擊按鈕？如果這是可能的，那麼我可以使用可見性=可見，並且一切都按需要執行。

德爾

來源

2014-10-27 Delano Wegener

我想你應該通過在JavaScript中顯示SVG中的元素來解決這個問題。 – Brad 2014-10-27 21:20:07

你所說的延遲是通過CSS實現的。您是否嘗試手動添加路徑而不是切換可見性？ – 2014-10-27 21:23:26

布拉德和坦澤爾;我不明白你在暗示什麼。如何在SVG中顯示元素？如何手動追加路徑？你是什麼意思？ – 2014-10-27 23:39:06

你可以做的就是把動畫的CSS屬性一類的SVG <path>元素沒有開始。然後，當您添加課程時，動畫開始。如果你想屬性

因此，例如，按如下方式更改「路徑」 CSS規則定義：

.path { 
    stroke-dasharray: 1000; 
    stroke-dashoffset: 1000; 
} 

.showpath { 
    animation: 5s linear 0s normal forwards 1 running dash; 
}

，你可以去掉「隱藏的可見性」。

在你的按鈕處理

然後，添加「showpath」類要在動畫路徑。

document.getElementById("parabola").setAttribute("class", "path showpath");

沒有與你不過SVG的一個問題。您已將相同的「id」屬性賦予多個元素。「id」屬性必須是纔是唯一的。所以你應該把它們稱爲「拋物線1」和「拋物線2」。

document.getElementById("parabola1").setAttribute("class", "path showpath");

如果您需要將其重置爲無形的，你可以把class屬性回到它是如何開始的。

document.getElementById("parabola1").setAttribute("class", "path");

來源

2014-10-28 03:09:21

感謝BigBadaboom。你的建議使我成爲一個快樂的人。以高分辨率查看FF中的http://www.drdelmath.com/sketch_parabola/index.html（我仍然有一些工作使其在較低的分辨率下工作）。但是，它似乎只在FF中工作，我認爲這是因爲大多數其他瀏覽器（尤其是IE）不支持SVG動畫。對於我可以加入的行 – 2014-10-29 21:04:47

我應該尋找JavaScript解決方法嗎？我知道如何使用JavaScript代替線條，但不使用拋物線。 – 2014-10-29 21:07:53

對於其他瀏覽器，您需要在「動畫」和「@關鍵幀」規則前綴。例如，在Chrome中，您需要使用'-webkit-animation'。有關詳細信息，請參閱此處的瀏覽器兼容性表：https://developer.mozilla.org/en-US/docs/Web/CSS/animation – 2014-10-30 03:21:44

SVG路徑的顯示速度

回答

相關問題