svg radialGradient stop-opacity not animatable?

Question

I want to animate the stop-opacity of a gradient in an svg element using jQuery, but it doesn't work. Animating stop-color, however, does work using the same code.

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

What am I doing wrong here? Or is stop-opacity simply not-animatable?

UPDATE I

According to W3, stop-opacity is animatable. http://www.w3.org/TR/SVG/pservers.html#GradientStops

That link means it's SMIL animatable. That's not what you're doing, although having said that what you're doing should work. — Robert Longson

Unknown Unknown · Accepted Answer · 2013-09-03T11:34:37

Apparently, the value of stop-opacity is a string, not an integer.

If I change the jQuery to .css('stop-opacity','1') - it works.

Strange, though.

svg radialGradient stop-opacity not animatable?

1 Answers