CODEWITHSUNDEEP
jquerysvgradial-gradients
user1912899
user1912899

Reputation:

svg radialGradient stop-opacity not animatable?

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

Upvotes: 1

Views: 560

Answers (1)

user1912899
user1912899

Reputation:

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.

Upvotes: 0

Related Questions