[REQUEST] Add the ability to pass a matrix string for direct transformation about svg.js HOT 7 CLOSED

I know this is a much needed feature. In fact it it is planned for v0.11. You can apply a matrix using attr() but I also want to make it animatable. Therefore it requires a but more time but it will definitely get there this week.

Thanks for your input.

from svg.js.

I decided to implement it for v0.10 which has now been released. You can define a matrix in two ways. The first is to pass a string value:

var draw = SVG('viewport')
var circle = draw.circle(100,100)

circle.transform('matrix', '1, 0.5, 0, 1, 0, 0')

or even:

circle.matrix('1, 0.5, 0, 1, 0, 0')

The second is to define the matrix values (a, b, c, d, e or f) individually. So this will have the exact same effect as the example above:

circle.transform({ b: 0.5 })

This will work for animations too:

circle.animate(3000).transform({ b: 0.5 })

https://github.com/wout/svg.js#transform

from svg.js.

Great work!

Hate to be a pain but I do have one suggestion and I'm sure you are aware of it.

When adjusting the transformation matrix the trans property should be adjusted across the board.

For example:

    circle.transform('matrix', '2,0,0,2,100,100');

Results:

    circle.trans.x = 0;
    circle.trans.y = 0;
    circle.trans.scaleX = 1;
    circle.trans.scaleY = 1;

Expected:

    circle.trans.x = 100;
    circle.trans.y = 100;
    circle.trans.scaleX = 2;
    circle.trans.scaleY = 2;

I do see the trans a, b, c, d, e, f are updated.

This should also be backwards compatible as well if the transform properties ( x, y, rotation, skewX, skewY, scaleX, scaleY ) are updated the matrix should correspond to the new values.

Bests,
@dhaakon

*edit - wrong code syntax for matrix transformation

from svg.js.

Yes, I chose to keep the matrix and the other transforms separated. For example, you are either going to use matrix or translate, not both of them together. And if you want to mix them you can take advantage of their cascading behaviour.

from svg.js.

Just another thought, because it's a choice really. If the matrix transformations should update other transformations as well the system should be matrix-only. The way it works now every transformation type is added if there it differs from the default. With a matrix-centric system, no other transformations can be added because that would result in a double transformation.

from svg.js.

I sort of understand the logic in separating the transforms from the transformation matrix but I do not think it is good practice especially when you consider the (translate, scale, rotate, skew) transformations from javascript are converted to matrix transformations on the browser side.

For example see:
https://code.google.com/p/chromium/codesearch#chromium/src/third_party/WebKit/Source/WebCore/svg/SVGTransform.cpp&l=88

Chromium interprets the SVGElement.scale ( sx , sy ) into an affine transformation.

So when SVG.js scales an element it is already doing a matrix operation just on the browser side. I have found in my experience that doing the matrix operation and manipulation on the JS side is more performant (at least in regards to CSS transforms) than allowing the browser to do the math.

I have set up a simple jsfiddle to illustrate the properties being manipulated on two types of animations (matrix and transform). You can see where in complex animations and switching from a translate operation to a direct matrix manipulation would result in confusion. The actual svg matrix is not consistent when manipulated through non-matrix transformations.

http://jsfiddle.net/qnh9y/5/

from svg.js.

I have to stick with my initial starting point though. Svg.js started out as lightweight low-profile library providing convenience methods, it's an abstraction layer focussed on readability. That's what it does right now with transformations as well, it provides the user with an easy usable interface but it is not too opinionated. If one needs to use transformations beyond the capabilities of the transform() method, there is always the possibility to manually set multiple matices using the attr() method:

rect.attr('transform', 'matrix(a,b,c,d,e,f) matrix(a,b,c,d,e,f)')

They can even be animated using the during() method and the morph function provided by the fx module. It requires only a little bit mode code on the side of the user. It would be quite easy to put this kind of extended matrix support in a plugin.

from svg.js.