SVG动画没有方法

Question

我有一个 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>

我正在尝试转换 SVG，使用 JQuery 来选择它：

$('#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 设置动画？我以为你能做到这一点？如果是这样，我将不胜感激在正确方向上的一点......

Answer 1

实际上您使用的是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);