Animate svg image：获取动画路径，但不是椭圆

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内置动画引擎，使用stroke-dasharray和stroke-dashoffset属性在所选 svg 元素内的每个路径上转换笔划。

你这里没有<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。