动画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>

为什么会这样？我正在使用此JavaScript库（jquery-drawsvg），并且代码看起来像：

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

• 所以这很简单。它确实适用于我的SVG文件中的路径。但是我不明白为什么不绘制椭圆。

Answer 1

插件页面上的第一个句子非常清楚：

此插件使用jQuery内置的动画引擎在所选 svg 元素内部的每个 path上的行程中过渡，并使用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。