Skip to content Skip to sidebar Skip to footer

Raphael Setting Transparent Png Opacity Loses Alpha Channel

I'm using Raphael 2.1.0. When I animate the opacity of a transparent PNG under IE8, the transparency animates well. ie: 'from' an opacity of 0.0 'to' an opacity of 1.0. After the

Solution 1:

I tried the following

  • Animating the alpha, everywhere, but this causes null reference issues within Raphael
  • Chaining translate()/transform() and attr()
  • Applying filters directly to the object
  • Changing the order (attr before transform and vice versa)

In the end, the working solution is to translate AND set the opacity using attr:

if (removeOnStop) {
    element.attr({ opacity: defaultProperties.alpha });
    element.transform('T' + defaultProperties.left + ',' + defaultProperties.top);
}

became

if (removeOnStop) {                        
    element.attr({ transform: 'T' + defaultProperties.left + ',' + defaultProperties.top, 
                     opacity: defaultProperties.alpha });
}

Importantly, you must do this when initially creating the image and setting the initial opacity.

I hope this will save people future trouble.

Post a Comment for "Raphael Setting Transparent Png Opacity Loses Alpha Channel"