1

私はSVG（html）を持っています：

    <div>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <g id="radius-selector">
          <!-- Circle -->
          <circle id="radius-circle" cx="50%" cy="35%" r="25%" stroke="black" stroke-width="2" />
          <!-- Radius ring -->
          <circle id="radius-ring" cx="50%" cy="35%" r="12.5%" stroke="green" stroke-width="10" fill="none"/>
        </g>

      </svg>
    </div>

JQueryを使用してSVGを次のように選択して、SVGを変換しようとしています:

$('#radius-ring')[0].animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);

しかし、コンソールにエラーが表示され続けます:

TypeError: Object #<SVGCircleElement> has no method 'animate'
arguments: Array[2]
get message: function () { [native code] }
get stack: function () { [native code] }
set message: function () { [native code] }
set stack: function () { [native code] }
type: "undefined_method"
__proto__: Error

SVG をアニメーション化するには、実際にプラグインまたはライブラリをインストールする必要がありますか? これを達成できると思いましたか？もしそうなら、私は正しい方向にポイントをいただければ幸いです....

4

1 に答える 1

4

実際には、DOMオブジェクトではなくjqueryオブジェクトを使用しています。この方法を試してください

 $('#radius-ring').animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);

それ以外の

 $('#radius-ring')[0].animate({fill: "#223fa3", stroke: "#000", "stroke-width": 80, "stroke-opacity": 0.5}, 2000);
于 2013-01-04T06:04:44.750 に答える