Animate svg image: got paths animated, but not the ellipse

Question

I am trying to animate an svg image. It does animate all the paths, but it does not animate my ellipse which looks like this:

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

why could this be? I am using this javascript library (jquery-drawsvg) and the code looks like this:

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

• so it's quite simple. and it does work for the paths in my svg file.but i do not understand why the ellipse is not being drawn.

Answer 1

The first sentence on the plugin's page is very clear:

This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using stroke-dasharray and stroke-dashoffset properties.

You don't have a <path> here, you have an <ellipse> (or should I say "circle"?). The plugin just works with paths .

One alternative is converting the ellipse to a path, then using that path instead of the ellipse.

This is the path that corresponds to your 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"/>

Don't forget to set the stroke and the stroke-width in the above path.