Transforming already transformed matrix

[Jeff S 4 Likes (Newbie)]

Hello, 

 

I am trying to apply a matrix transformation to an SVG group element which already has a matrix transformation applied to it. 

 

So, the current transformation is:

matrix(1.0349256,-0.46932166,0.45501964,1.1067711,-3.9816644,131.00524)

the TweenMax.to transform being applied is:

matrix(2.03492, -0.46932, 0.45501, 0.510676, 7.51245, 132.861)

the result I am expecting is:

matrix(2.03492, -0.46932, 0.45501, 0.510676, 7.51245, 132.861)

but the result is that the transform attribute is gone and a new style attribute exists as follows:

style="transform: matrix(2.03492, -0.46932, 0.455, 0.51068, 19.2763, 121.028);"

The result is very close.  The first 4 numbers in the matrix are great.  The last two, I am confused about.

 

I don't mind doing some preprocessing to get the matrix into the right form, but I am unsure what adjustments need to be made in order to get the last two values to line up correct, while preserving the first 4 values in the matrix.

 

Any advice for solving this problem to shed some light on what is happening and what I need to do to adjust my tween would be greatly appreciated.

 

 

 

 

 

See the Pen EPGZLp by anon (@anon) on CodePen

[GreenSock 8,117 Likes (Superhero)]

interesting - I never anticipated someone setting a matrix string directly on an SVG element like that (usually people define properties like rotation, scaleX, scaleY, x, y, etc.) but it's an entirely valid request. 

 

The problem simply has to do with the fact that GSAP does some advanced adjustments under the hood to make SVG transforms easier to work with in terms of the origin (more consistent with the way it works on regular DOM elements), like being able to spin an SVG element around its center (or wherever). So there are some intentional offsets applied, but they weren't being factored into the raw matrix that you were passing in.

 

I have applied a fix to the upcoming release so that it'll "just work" in your scenario - you can see an uncompressed version at https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js

 

In the mean time, you can use this script to adjust your matrix:

TweenMax.to('#g32459', 3, {transform: fixMatrix(document.getElementById("g32459"), "matrix(2.03492, -0.46932, 0.45501, 0.510676, 7.51245, 132.861)")});

function fixMatrix(element, matrix) {
    var version = CSSPlugin.version.split("."),
        m = matrix.match(/(?-|\+)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/ig),
        transform = element._gsTransform;
    if (m.length !== 6 || +version[0] > 2 || +version[1] > 18 || +version[2] > 2) { //skip the "fix" if an updated CSSPlugin is already loaded. 
        return matrix;
    }
    if (!transform) {
        TweenLite.set(element, {x:"+=0"}); //forces creation and population of the _gsTransform object
        transform = element._gsTransform;
    }
    m[4] -= (transform.xOrigin - (transform.xOrigin * m[0] + transform.yOrigin * m[2]) + transform.xOffset);
    m[5] -= (transform.yOrigin - (transform.xOrigin * m[1] + transform.yOrigin * m[3]) + transform.yOffset);
    return "matrix(" + m.join(",") + ")";
}

Does that help?

[Jeff S 4 Likes (Newbie)]

It helps a lot actually.  

 

Thanks Jack!