html - Svg 动画 : begin and end

Question

我正在研究 svg animatepoint。我想要一个圆圈缩放到 radius=80，然后再变回 60。我看到了 msdn 并使用了 begin 和 .end 方法。

它适用于 Firefox，但在 google chrome 中失败。在谷歌浏览器中，它会将半径更改为 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 链接: 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/

谁能有其他方法来完成这个动画？

Answer 1

您需要在您的 ID 周围加上引号(“ZoomAct”和“NarrowAct”)。

当您在 HTML 页面中内联它时(与 jsfiddle 一样)，浏览器使用更宽松的 HTML 解析规则。但在独立的情况下，它使用 XML 解析规则，要求您的属性有引号。

事实上，Chrome 会在您加载它时准确地告诉您。

This page contains the following errors:

error on line 9 at column 15: AttValue: " or ' expected Below is a rendering of the page up to the first error.