アニメーション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

プラグインのページの最初の文は非常に明確である：

このプラグインは、選択したSVG要素内のすべてのパスにストロークを移行するためにjQueryの組み込みのアニメーションエンジン使用しています、ストロークダッシュアレーとストロークダッシュオフセットのプロパティを使用します。

あなたは<ellipse>（または私は「円」と言うべき？）を持って、ここ<path>を持っていません。プラグインはパスで動作します。

代わりに、楕円をパスに変換し、楕円の代わりにそのパスを使用する方法もあります。

これはあなたの楕円に対応してパスです：

<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を設定することを忘れないでください。