title: zoom/pan with d3.js and svg not working
body: <p>I am new in d3.js . I am trying to make zoom/pan on svg drawing, which is a separate svg file, by using d3.behavior.zoom(). Zoom is working excellent, but pan does not work properly. It works, when mousedown in svg area and mousemove outside of svg area , in html area.
  I'll appriciate for some help. Thanks.</p>
  
  <p>Here is a code of html file.
      
      
      </p>
  
  <pre><code>&lt;style&gt;
      #container { pointer-events: all;}
  &lt;/style&gt;
  
  &lt;head&gt;
  
  &lt;script src="d3.v3.js" charset="utf-8"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="./style.css"/&gt;
  
  
      &lt;script&gt; 
          var svg, g, obj, scale;
          function initDocument() {
          var margin = {top: -5, right: -5, bottom: -5, left: -5},
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;
  
          // Set SVG object
          var object = document.getElementById('drawing');
  
          if (object.contentDocument)  
              svgDoc = object.contentDocument;
          else {
              try {svgDoc = object.getSVGDocument();}
              catch(exception) {}
          }
  
          svg = d3.select(svgDoc).select("svg")
          .attr("pointer-events", "all");
  
          g = svg.select("#container")
          .attr("pointer-events", "all");
  
          var zoom = d3.behavior.zoom()
          .on("zoom", zoomed,false);
  
          svg.call(zoom);
          };
  
          function zoomed() {
          scale =  d3.event.scale;
          g.attr("transform", "translate(" +
          d3.event.translate.join(",") + ") scale(" + scale + ")");
          }
  
  
      &lt;/script&gt; 
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div&gt;
          &lt;iframe id="drawing" type="image/svg+xml" 
          src="testDraw.svg"
          width="975px" height="480px" onload="initDocument();"&gt;
          &lt;/iframe&gt;
  
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is svg file:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8" standalone="no"?&gt;
  &lt;?xml-stylesheet href="svg_style.css" type="text/css"?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"                 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="testDraw.wd" width="03910" height="02380" viewBox="-100 -100 04410 02480"&gt;
  &lt;g id="container"&gt;
  &lt;g id="PA921" stroke="BLACK   " fill="BLACK   " &gt;
  &lt;path d="
  M 01241 01411 L 01230.01 01411.01 L 01227 01400 L 01220 01421 L 01217 01411 L 01207.01             01411.01 L 01207.01 01669.01 L 01208 01675 L 01210 01679 L 01215 01681 L 01220 01683 L 01241.01 01683.01 L 01241.01 01411.01" /&gt;
  &lt;text x="01216" y="01652" style="font-size:018px" &gt;
  13
  &lt;/text&gt;
  &lt;text x="01216" y="01635" style="font-size:018px" &gt;
  10
  &lt;/text&gt;
  &lt;text x="01221" y="01499" style="font-size:018px" &gt;
  6
  &lt;/text&gt;
  &lt;text x="01221" y="01482" style="font-size:018px" &gt;
  5
  &lt;/text&gt;
  &lt;text x="01221" y="01465" style="font-size:018px" &gt;
  4
  &lt;/text&gt;
  &lt;text x="01221" y="01448" style="font-size:018px" &gt;
  3
  &lt;/text&gt;
  &lt;text x="01198" y="01705" style="font-size:018px" &gt;
  PA921
  &lt;/text&gt;
  &lt;/g&gt;
  &lt;g id="PA2500" stroke="BLACK   " fill="BLACK   " &gt;
  &lt;path d="
  M 00612 00561 L 00622.01 00561.01 L 00625 00550 L 00632 00571 L 00635 00561 L 00646.01 00561.01 L 00646.01 00183.01 L 00644 00177 L 00642 00173 L 00637 00171 L 00632 00170 L 00612.01 00170.01 L 00612.01 00561.01" /&gt;
  &lt;text x="00626" y="00479" style="font-size:018px" &gt;
  G
  &lt;/text&gt;
  &lt;text x="00626" y="00224" style="font-size:018px" &gt;
  E
  &lt;/text&gt;
  &lt;text x="00654" y="00158" style="font-size:018px" &gt;
  PA2500
  &lt;/text&gt;
  &lt;/g&gt;
  &lt;g id="JA2500" stroke="BLACK   " fill="BLACK   " &gt;
  &lt;path d="
  M 00612 00170 L 00595.01 00170.01 L 00595.01 00561.01 L 00612.01 00561.01 L 00612.01     00170.01" /&gt;
  &lt;text x="00535" y="00158" style="font-size:018px" &gt;
  JA2500
  &lt;/text&gt;
  &lt;/g&gt;
  &lt;g id="PA3002" stroke="BLACK   " fill="BLACK   " &gt;
  &lt;path d="
  M 01377 00289 L 01387.01 00289.01 L 01390 00278 L 01397 00299 L 01400 00289 L 01411.01 00289.01 L 01411.01 00166.01 L 01409 00160 L 01407 00156 L 01402 00154 L 01397 00153 L 01377.01 00153.01 L 01377.01 00289.01" /&gt;
  &lt;text x="01391" y="00224" style="font-size:018px" &gt;
  B
  &lt;/text&gt;
  &lt;text x="01419" y="00158" style="font-size:018px" &gt;
  PA3002
  &lt;/text&gt;
  &lt;/g&gt;
  &lt;g id="JA3002" stroke="BLACK   " fill="BLACK   " &gt;
  &lt;path d="
  M 01377 00153 L 01360.01 00153.01 L 01360.01 00289.01 L 01377.01 00289.01 L 01377.01 00153.01" /&gt;
  &lt;text x="01283" y="00158" style="font-size:018px" &gt;
  JA3002
  &lt;/text&gt;
  &lt;/g&gt;
  
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>