Can't apply a transform string on an SVG element

[fregante]

I may have found a bug. I can't apply a transform string to an SVG element, but it normally works fine on HTML elements. I made a pen that shows how the only 2 out of 3 ways to do it work.

Red and Green work fine, but the blue one doesn't.

TweenLite.set('#blue', {
  transform:'scale(1.5)'
});
TweenLite.set('#red', {scale:1.5});
TweenLite.set('#green', {
  attr:{transform:'scale(1.5)'}
});

I was using a full transform string because I needed to apply a pre-composed matrix and there doesn't seem to be a matrix property in CSSPlugin.

[jackdoyle]

It looks like this has to do with a browser bug that incorrectly reports computed style values as "none" on SVG elements. Proof: (run this in Chrome)

var element = document.getElementById("blue");
element.style.WebkitTransform = "scale(2)";
var computedStyle = document.defaultView.getComputedStyle(element, null);
console.log(computedStyle.WebkitTransform); //expect "matrix(2,0,0,2,0,0)" but get "none".

If you run that same code with a regular (non-SVG) DOM element, it'll work fine.

I'll implement a workaround in the next release of CSSPlugin/TweenMax. Let me know if you'd like a sneak-peek to test it out.

[fregante]

I'm glad you found the culprit. I can try it out, sure!

[fregante]

v1.12.0 fixed this as well. You're on a roll!