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>

我正在尝试转换 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 设置动画？我以为你能做到这一点？如果是这样，我将不胜感激。

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 回答