Quy mô SVG xung quanh trung tâm với javascript đơn giản

Question

Tôi gặp sự cố có thể hiểu rõ cách tọa độ hoạt động trong SVG. Tôi có một hàm javascript có tỷ lệ đồ họa svg như:

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 + ")"); 

Điểm sau khi chia tỷ lệ trung tâm được dịch nhẹ để đồ họa mất là trung tâm "địa lý". Làm thế nào tôi có thể xác định bản dịch nào tôi cần phải có để mở rộng đồ họa "xung quanh" trung tâm của nó?

Cảm ơn.

Answer 1

Bạn có cân nhắc các phương pháp tiếp cận khác không?

Nếu bạn chỉ tìm kiếm phóng to trên một svg/ra, nó có thể được dễ dàng hơn để làm điều đó khác nhau, ví dụ: http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/

tôi đã cùng một vấn đề trong một thời gian trước và kết thúc việc tạo zoom riêng tôi sử dụng này: https://github.com/rstacruz/jquery.transit

Về cơ bản, bạn sử dụng quy mô biến đổi css cho trình bao bọc svg và svg điều chỉnh độc đáo. Bạn thậm chí có thể tạo hiệu ứng thu phóng.

Answer 2

Như tôi nghĩ phù hợp hơn mục đích của tôi và sau khi đọc làm thế nào để làm điều đó trong liên kết hữu ích

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

tôi đã thay đổi nó để mở rộng đồ họa xung quanh vị trí của chuột khi bánh xe của nó được cuộn,

Nếu nó giúp này là mã (sử dụng phương pháp setCTM SVGPan của):

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));