Yannick, Thanks for your input...that method for transforming from a fixed point proved to be an essential part of the issues I was having.
-Zane --- In [email protected], yannick.bochatay@... wrote: > > 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" <zotterdas@...> > Ã: [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/
