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);

SVG动画没有方法

1 个答案: