1

I've created a button with Raphael.js that has a gradient background. Now I want to change to a different gradient when hovering over the button using Element.hover. But as soon as I move the mouse over the button, it starts showing only a solid color.

Here's my fiddle.

Maybe it's browser-related. I only tested Chrome and Safari under OS X.

nwellnhof
  • 32,319
  • 7
  • 89
  • 113

1 Answers1

1

The problem is that you call transform on the set afterwards. The tranform() method is deprecated, use the transform attr instead. Also, you might want to apply the transformation individually when you create the elements, as Raphael is known to have some issues in transforming sets uniformly.

Andrei Nemes
  • 3,062
  • 1
  • 16
  • 22
  • You're right. It's the call to `transform` that triggers the problem. But when I set the `transform` attribute on each element individually, I get the same behavior. See my [updated fiddle](http://jsfiddle.net/ruPGH/1/). – nwellnhof Mar 16 '13 at 10:54
  • I think it's related to an issue in Raphael's handling of the transform matirx. If you call `attr()` after you set transformations it won't work - which is what your `hover` event does. [Here is the issue](https://github.com/DmitryBaranovskiy/raphael/issues/476) and the fix, if manually modifying the Raphael source code is your cup of tea. – Andrei Nemes Mar 16 '13 at 11:25
  • It seems that I hit exactly this issue. Thanks for your help. – nwellnhof Mar 16 '13 at 13:32