动画svg图像：得到的路径动画，但不是椭圆

Question

我想动画的SVG图像。它动画所有的路径，但它并没有动画我椭圆形，看起来像这样：

<ellipse id="Oval-1" fill="#0B619B" opacity="0.141849347" cx="929.5" cy="94.5" rx="94.5" ry="94.5"></ellipse> 

为什么会这样？ 我使用this javascript library (jquery-drawsvg)和代码如下所示：

var $svg = $('svg').drawsvg(); 
$svg.drawsvg('animate'); 

• 所以这是很简单的。它确实为我的svg文件中的路径工作，但我不明白为什么椭圆不被绘制。

Answer 1

插件的页面上的第一句话是很清楚的：

此插件使用jQuery的内置动画引擎过渡行程每路径选定SVG元素中，使用stroke-dasharray和stroke-dashoffset属性。

您还没有<path>在这里，你有一个<ellipse>（或者我应该说“圈子”？）。该插件只适用于路径。

一种替代方法是将椭圆转换为路径，然后使用该路径代替椭圆。

这是对应于你的椭圆形的路径：

<path id="Oval-1" fill="#0B619B" opacity="0.141849347" d="M835,94.5a94.5,94.5 0 1,0 189,0a94.5,94.5 0 1,0 -189,0"/> 

不要忘记设置stroke和上述路径stroke-width。