以SVG爲中心縮放SVG周圍的中心腳本的問題

我有一個問題，也許很好理解座標如何工作SVG。我有縮放的SVG圖形JavaScript函數，諸如：以SVG爲中心縮放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 + ")");

的要點是，按比例縮放之後中心略微平移，使得該圖形失去爲「地理」中心。我怎樣才能確定我需要哪種翻譯將圖形「圍繞」其中心？

謝謝。

來源

2012-12-13 kandan

您是否考慮過其他方法？

如果你只是想找放大/縮小的SVG，可能更容易做到這一點不同，如： http://www.cyberz.org/blog/2009/12/08/svgpan-a-javascript-svg-panzoomdrag-library/

我前一陣子有同樣的問題，並最終使用創造我自己的縮放這個：https://github.com/rstacruz/jquery.transit

你基本上使用CSS變換比例爲svg包裝和svg調整很好。你甚至可以動畫縮放。

來源

2012-12-14 12:55:29 tborychowski

謝謝！以前沒有聽說過jquery.transit。我已經以不同的方式使用了SVGPan，並且發現了許多其他複雜的公用程序，只是不得不放棄。我將SVGPan中的默認代碼從translate（px，py）.scale（z）.translate（-px，-py）更改爲正好縮放（z），因爲它工作得更好，至少在我的情況下，但即使是這樣不是100％完美。無論如何，我正在回答我的問題，因爲我發現了一種擴展方式，讓我更加確信。乾杯。 – kandan

正如我認爲更符合我的目的和閱讀如何做到這一點的有用鏈接

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

來源

2012-12-16 21:20:22 kandan

以SVG爲中心縮放SVG周圍的中心腳本的問題

回答

相關問題