Question

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

适用于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链接： 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周围的引号（＆＃34; ZoomAct＆＃34;和＆＃34; NarrowAct＆＃34;）。

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

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

此页面包含以下错误：
     第15行第9行的
错误：AttValue：＆＃34;或者＆＃39;预计下面是一个   渲染页面直到第一个错误。

Svg动画：开始和结束

1 个答案: