Javascript 设置SVG填充颜色动画后淡出

我正在尝试制作一个简单svg复选框的动画

<svg class="checkbox" xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle class="circle" stroke="green" stroke-width="2" cx="26" cy="26" r="25" fill="transparent"/>
   <path stroke="green" stroke-width="5" fill="none" d="M14.1 27.2l7.1 7.2 16.7-16.8"/>
</svg> 

将不起作用，因为vanilla jQuery不支持为SVG设置

fill

动画。但是，

css

功能确实起作用：

$('.circle').on("click", function() { 
  $(this).css({fill : 'green', transition: "2.0s"});
});

我想在动画完成后淡出整个svg，但是

css

没有回调！我被迫使用

delay

功能大致完成2秒的转换：

$('.circle').on("click", function() { 
  $(this).css({fill : 'green', transition: "2.0s"});
  $(".checkbox").delay(2000).fadeOut('fast'); 
});

还有比这更优雅的方法吗？我不愿意仅仅为了优雅地淡出它而包含一个新的javascript库

---

$（“#someSelector”）.one（“transitionend WebKittTransitionEnd或transitionend MSTransitionEnd”，function（）{…}）这里有一个更优雅的方法，使用
transitionend
：


函数fillGreen（）{
$（this.css（{fill:'green'，transition:'2.0s}）；
}
函数淡出复选框（）{
$（“.checkbox”）.fadeOut（'fast'）；
}
$（“.circle”）
.1（'点击'，绿色填充）
.1（'WebKittTransitionEnd otransitionend otransitionend otransitionend msTransitionEnd transitionend transitionend msTransitionEnd transitionend'，淡出复选框）


$('.circle').on("click", function() { 
  $(this).css({fill : 'green', transition: "2.0s"});
  $(".checkbox").delay(2000).fadeOut('fast'); 
});