javascript - 将缩放/平移脚本附加到来自 Google Geochart 的 SVG

Question

我正在尝试对使用 google geochart API 生成的 map 实现某种缩放/平移功能。有一些在线脚本可以缩放/平移 svg 图像，但我没有成功地将它们实现到 geochart api 生成的 SVG。

我正在尝试 SVGPan 库 http://code.google.com/p/svgpan/

我用来将脚本附加到 SVG 的代码是:

google.visualization.events.addListener(chart, 'ready', function () {

var script = document.createElementNS('http://www.w3.org/2000/svg', 'script');     
script.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://www.cyberz.org/projects/SVGPan/SVGPan.js');        
var svg = document.getElementsByTagName('svg')[0];
svg.appendChild(script);
}); 

这是 jsfiddle:

http://jsfiddle.net/cmoreira/CetaA/

使用 Firebug，我可以看到脚本被放置在 svg 上，但是没有任何反应，它没有像预期的那样实现 svg 中的功能。

我不确定这行是否正确，因为我没有在网上找到任何示例:

 var script = document.createElementNS('http://www.w3.org/2000/svg', 'script');

我是在做错什么，还是我想做的事是不可能的？

感谢您的帮助! 干杯 卡洛斯

Answer 1

经过一些实验，我找到了一个简单的解决方案，但由于目前还没有任何有值(value)的答案，我决定分享我目前所拥有的。

我决定用 CSS 来做，在放大/缩小时用不同的值重新绘制 map ，并用 CSS overflow hidden 。

这是一个工作示例:

http://jsfiddle.net/cmoreira/CCUpf/

CSS

#canvas {
    width:400px;
    height:300px;
    overflow:hidden;
}

#visualization {
top:0px;
left:0px;
}

缩放/平移 Javascript

function zoomin() {
    mw = mw+50;
    mh = mh+50;
    x = x-25;
    y = y-25;
    document.getElementById('visualization').style.top = y +'px';
    document.getElementById('visualization').style.left = x +'px';
    drawVisualization(mw,mh);
 }

  function zoomout() {
    if(mw > 600) {
    mw = mw-50;
    mh = mh-50;
    x = x+25;
    y = y+25;
    document.getElementById('visualization').style.top = y +'px';
    document.getElementById('visualization').style.left = x +'px';
    drawVisualization(mw,mh);
    }
 }

 function left() {
     x = x-50;
     document.getElementById('visualization').style.left = x +'px';
 }
 function right() {
     x = x+50;
     document.getElementById('visualization').style.left = x +'px';
 }
  function up() {
     y = y-50;
     document.getElementById('visualization').style.top = y +'px';
 }
   function down() {
     y = y+50;
     document.getElementById('visualization').style.top = y +'px';
 }

我知道这对于 google geochart API 来说是一个非常糟糕的缩放/平移功能，但它确实不错，对吧？

欢迎对这个简单的方法进行任何改进。 谢谢!