Hi,
To scale or rotate about a fixed point, you have first to translate your
element so that the fixed point is at the origin.
Then you perform the scaling or rotation and then the inverse of the original
translation to move the fixed point back to its original position.
For example, if you want to scale from the top left corner :
var yourElement = document.querySelector('#yourElementID');
var svg = yourElement.ownerSVGElement;
var transformList = yourElement.transform.baseVal;
var mtx = svg.createSVGMatrix();
var box = yourElement.getBBox();
var scaleX = 2;
var scaleY = 3.5;
mtx = mtx.translate(box.x,box.y)
.scaleNonUniform(scaleX,scaleY)
.translate(-box.x,-box.y);
var transf = transformList.createSVGTransformFromMatrix(mtx);
transformList.appendItem(transf);
I hope it will help.
Regards,
Yannick
http://ybochatay.fr
----- Mail original -----
De: "zotterdas" <[email protected]>
À: [email protected]
Envoyé: Mercredi 26 Octobre 2011 23:05:53
Objet: [svg-developers] Interactive SVG & matrix calculations
I'm working on an inline, browser-based SVG editor powered by jQuery,
and I'm having trouble getting various elements to dynamically resize
predictably and without dramatic shifting across the canvas. I believe
there is some aspect of the matrix recalculations that I'm not
accounting for.
The sandbox is accessible here: http://zane.quilldev.com/default.cfm .
The system automatically loads a sample SVG, which is resized to fit the
canvas area. Once it's loaded, you can select individual elements by
clicking on them. Once an element is selected, it can be resized via
handles along its border. My issue can be demonstrated by resizing the
(grouped) car object along the X-axis. It does resize, but also flickers
and shifts across the canvas. In contrast, doing the same with any of
the text doesn't produce flickering or shifting, though the same code is
operating on both.
The matrix calculations doing the resizing have gone through a variety
of formulations in attempts to alleviate the problem, but are currently
is quite simple, just taking the getCTM() of the element, setting a new
x-scale value, dividing all the matrix values by the parent SVG's scale,
then replacing the old matrix with the new one in the "transform"
attribute. Everything operates without errors, but the visual behavior
is off.
Any guidance is appreciated. Thanks in advance.
[Non-text portions of this message have been removed]
------------------------------------
-----
To unsubscribe send a message to: [email protected]
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
[email protected]
[email protected]
<*> To unsubscribe from this group, send an email to:
[email protected]
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
