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