Svg 动画：开始和结束

Question

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

它适用于 Firefox，但在 google chrome 中失败。在 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 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/

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

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.

Svg 动画：开始和结束

Svg animate: begin and end

html

css

svg