svg - 在 d3.js 中放大来自外部 SVG 的对象

Question

在缩放 SVG 对象方面需要帮助。我有一些外部 SVG（用 Inksape 制作），它很大，我希望能够在 D3.js 的帮助下缩放到它的某些部分/对象。但我不明白如何制作，所有关于地图和画布的例子。任何建议如何制作，缩放到对象（BBox）和坐标。

这是一些代码，example.svg 大于 640x480。在按下空格键时，我需要一些转换（翻译/缩放），这将显示 example.svg 的另一部分：

var width = 640,
height = 400,
focused = false;

var pano = d3.select("div#pano");

d3.xml("data/example.svg", "image/svg+xml", function(xml) {
  var importedNode = document.importNode(xml.documentElement, true);
  d3.select("#pano").node().appendChild(importedNode);

  frames = d3.select("g#main");

  var zoom = d3.behavior.zoom()
      .translate([0, 0])
      .scale(1)
      .on("zoom", zoomed);

   pano.append("rect")
      .attr("class", "overlay")
      .attr("width", width)
      .attr("height", height)
      .on("keydown", function() {
        if (d3.event.keyCode == 32) {
          this.call(zoom);
        }
      })

   function zoomed() {
      frames.attr("transform", "translate(" + [0, -400] + ")");
   }    
});