सादा जावास्क्रिप्ट

Question

के साथ केंद्र के आसपास स्केल एसवीजी स्केल एसवीजी काम करता है कि मुझे अच्छी तरह से समझने में समस्या हो सकती है। मैं ऐसी है कि के रूप में एक जावास्क्रिप्ट समारोह है कि एक svg ग्राफिक मापता है:

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

मुद्दा यह है कि केंद्र स्केलिंग के बाद थोड़ा अनुवाद किया है तो ग्राफिक खो देता है "भौगोलिक" केंद्र है। मैं कैसे निर्धारित कर सकता हूं कि ग्राफ़िक को अपने आस-पास के ग्राफ़िक को स्केल करने के लिए मुझे किस अनुवाद की आवश्यकता है?

धन्यवाद।

Answer 1

क्या आपने अन्य दृष्टिकोण माना है?

तुम सिर्फ जूम एक svg पर बाहर /, यह इसे दूसरे तरीके से करने के लिए, आसान हो सकता है में की तलाश में हैं जैसे: http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/

मैंने कुछ समय पहले एक ही समस्या थी और उपयोग करके मेरा अपना जूम बना दी यह: https://github.com/rstacruz/jquery.transit

आप मूल रूप से एक एसवीजी रैपर के लिए सीएसएस ट्रांसफॉर्म स्केल का उपयोग करते हैं और एसवीजी अच्छी तरह से समायोजित करता है। आप ज़ूमिंग को भी एनिमेट कर सकते हैं।

Answer 2

के रूप में मुझे लगता है कि बेहतर मेरा उद्देश्य फिट बैठता है और कितने उपयोगी लिंक

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

में यह करने के लिए पढ़ने के बाद

मैं यह ग्राफिक माउस की स्थिति आसपास पैमाने पर करने के लिए जब अपने पहिया स्क्रॉल किया है बदल दिया है,

यदि यह मदद करता है इस कोड है (का उपयोग कर SVGPan के setCTM विधि):

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