svgradialGradient 停止不透明度不可动画？答案

【问题标题】：svg radialGradient stop-opacity not animatable?svgradialGradient 停止不透明度不可动画？
【发布时间】：2013-09-06 12:23:05
【问题描述】：

我想使用 jQuery 为 svg 元素中渐变的停止不透明度设置动画，但它不起作用。然而，使用相同的代码制作停止颜色动画确实有效。

HTML：

<svg>
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:white;stop-opacity:1" />
      <stop offset="100%" style="stop-color:white;stop-opacity:0" />
    </radialGradient>
  </defs>
</svg>

jQuery:

$('#someelement').on('click', function(){
  $('stop:eq(1)').css('stop-opacity',1);
});

我在这里做错了什么？还是停止不透明度根本无法动画化？

更新我

根据 W3，stop-opacity 是动画的。 http://www.w3.org/TR/SVG/pservers.html#GradientStops

【问题讨论】：

那个链接意味着它是 SMIL 动画的。这不是你正在做的事情，尽管你已经说过你正在做的事情应该有效。

标签： jquery svg radial-gradients

【解决方案1】：

显然，stop-opacity 的值是一个字符串，而不是一个整数。

如果我将 jQuery 更改为 .css('stop-opacity','1') - 它可以工作。

不过很奇怪。

【讨论】：