Skalowanie SVG wokół centrum za pomocą zwykłego javascript

Question

Mam problem z możliwością zrozumienia, jak współrzędne działają w SVG. Mam funkcji javascript, że skalowanie grafiki SVG, taki jak:

var g = document.getElementById("graph"); 
var nm = g.getCTM().multiply(k); //k is the scale factor 
g.setAttribute("transform", "matrix(" + nm.a + "," + nm.b + "," + nm.c + "," + nm.d + "," + nm.e + "," + nm.f + ")"); 

Chodzi o to, że po skalowaniu środek jest lekko tłumaczone więc grafika traci to „geograficzne” centrum. Jak mogę ustalić, jakie tłumaczenie muszę mieć, aby skalować grafikę "wokół" jej środka?

Dzięki.

Answer 1

Czy brałeś pod uwagę inne podejścia?

Jeśli tylko szukasz zoom in/out na SVG może być łatwiej to zrobić w inny sposób, np: http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/

miałem ten sam problem jakiś czas temu, a zakończył się tworząc własną zoomu przy użyciu to: https://github.com/rstacruz/jquery.transit

Zasadniczo użyj skali przekształcenia css dla opakowania svg, a svg ładnie się dopasowuje. Możesz nawet animować powiększanie.

Answer 2

jak myślę lepiej pasuje mój cel i po przeczytaniu jak to zrobić w pomocnego linka

http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Transforming_the_Coordinate_System#The_scale_Transformation

Zmieniłem go do skalowania graficznego wokół pozycję myszy, gdy jej koła jest przewijane,

Jeśli to pomoże to kod (za pomocą metody setCTM SVGPan za):

var svgRoot = document.getElementsByTagName("svg")[0]; 
var g = svgRoot.getElementById("viewport"); 

var newp = svgRoot.createSVGPoint(); 
newp.x = evt.clientX; 
newp.y = evt.clientY; 
newp = newp.matrixTransform(g.getScreenCTM().inverse()); 

var oldx = newp.x; 
var oldy = newp.y; 

//z = scale factor 
setCTM(g, g.getCTM().translate(-(oldx*(z-1)),-(oldy*(z-1))).scale(z));