Svg animate：開始和結束

我正在研究關於svg animatepoint。我想要一個圓圈縮放到半徑= 80，然後再變回60.我看到了msdn，並使用了begin和.end方法。Svg animate：開始和結束

它適用於Firefox，但在谷歌瀏覽器中失敗。在谷歌瀏覽器中，它會將半徑更改爲80（ZoomAct）並停止。它沒有運行（NarrowAct）動畫。

如何解決？

<circle r="60" cx="200" cy="200" id = "AnimatePoint" 
      style="fill:rgba(18, 66, 243 , 0.3);stroke:blue;stroke-width:4;display:block"> 

     <animate id = ZoomAct 
        attributeName="r" 
        from="60" to="80" 
        dur="1s" 
        begin ="0s;NarrowAct.end" 
     /> 
     <animate id = NarrowAct 
        attributeName="r" 
        from="80" to="60" 
        dur="1s" 
        begin="ZoomAct.end" 
     /> 
    </circle>

的jsfiddle LINK： http://jsfiddle.net/kimwong/mwxj220f/

更新由2015年1月15日

最後我發現了這個問題，它不涉及到雙引號。我在本地文件中添加了雙引號，它再次失敗。的問題是，我包括兩名JS庫：

<script type="text/javascript" src="jquery-2.1.3.js"></script> 
<script type="text/javascript" src="jquery.mobile-1.4.5.js"></script>

當我刪除.js文件之一。有用。

我在fiddle.net中添加這兩個庫之後有一個失敗案例：它會縮放一次並停止。 http://jsfiddle.net/kimwong/mwxj220f/2/

任何人都可以有其他的方法來完成這個動畫？

來源

2015-01-14 Kim Wong

在Chrome和Firefox上可以正常工作，你的'id's應該有雙引號。 ---> [Fiddle]（http://jsfiddle.net/mwxj220f/1/）。 –

謝謝。對不起，我忘了輸入雙引號。但我認爲問題不在這裏。當我在我的本地文件中打開它時，該動畫在Google chrome中仍然失敗。它在小提琴中奏效。 –

如果您無法提供演示此問題的測試用例，那麼我們可能無法幫助您。 –

您需要圍繞您的ids（「ZoomAct」和「NarrowAct」）引號。

當你在一個HTML頁面中插入它時（和jsfiddle一樣），瀏覽器使用更寬鬆的HTML解析規則。但在獨立的情況下，它使用XML解析規則，要求您的屬性具有引號。

事實上，Chrome會在你加載它時精確地告訴你。

此頁面包含以下錯誤：第15列第9行

錯誤：AttValue：「或」預期的下面是一個呈現向上翻頁的第一個錯誤

來源

2015-01-14 16:01:32

謝謝你的回答。但問題不在於這個問題中的雙引號。我已經更新了這個問題。請檢查一下。 :) –

Svg animate：開始和結束

回答

相關問題