实现SVG图片放大缩小(zoom)与拖动(pan)的方法

最经在做一个与SVG图片相关的功能，涉及到对该类图片的放大缩小及拖动操作，就像地图一样的效果。原理不细说了，请看文章《How to Zoom and Pan with SVG》。在此讲一下具体怎么实现.

首先，要在svg文件添加<script xlink:href="SVGPan.js"/>，如果svg文件头部没有包含命名空间"xmlns:xlink="http://www.w3.org/1999/xlink"，则需要加上该命名空间

然后，在svg文件中添加全局<g></g>标签，例子如下：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:xlink="http://www.w3.org/1999/xlink"   <!-- 须添加该命名空间 -->
   width="500"
   height="500"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.1 "
   sodipodi:docname="新建文档 1">
   <script xlink:href="SVGPan.js"/>       <!--所需的js文件-->
  <defs
     id="defs4">
  </defs>
  <metadata id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g id="layer1"
     transform="translate(0,-552.00215)">   <!--svg所有内容必须在此<g>元素包含下-->
    <g
       sodipodi:type="inkscape:box3d"
       style="fill:#418942;fill-opacity:1;stroke:none"
       id="g2987"
       inkscape:perspectiveID="#perspective2985"
       inkscape:corner0="0.51860074 : 0.40758425 : 0 : 1"
       inkscape:corner7="0.26291796 : 0.27390523 : 0.25 : 1">
      <path
         sodipodi:type="inkscape:box3dside"
         id="path2999"
         style="fill:#e9e9ff;fill-rule:evenodd;stroke:none"
         inkscape:box3dsidetype="11"
         d="m 175.7047,696.41485 35.83982,-23.62668 0,67.38967 -35.83982,13.8843 z" />
      <path
         sodipodi:type="inkscape:box3dside"
         id="path2989"
         style="fill:#353564;fill-rule:evenodd;stroke:none"
         inkscape:box3dsidetype="6"
         d="m 128.28937,673.39974 0,67.13749 47.41533,13.52491 0,-57.64729 z" />
      <path
         sodipodi:type="inkscape:box3dside"
         id="path2991"
         style="fill:#4d4d9f;fill-rule:evenodd;stroke:none"
         inkscape:box3dsidetype="5"
         d="m 128.28937,673.39974 33.33504,-32.96317 49.92011,32.3516 -35.83982,23.62668 z" />
      <path
         sodipodi:type="inkscape:box3dside"
         id="path2997"
         style="fill:#afafde;fill-rule:evenodd;stroke:none"
         inkscape:box3dsidetype="13"
         d="m 128.28937,740.53723 33.33504,-19.37092 49.92011,19.01153 -35.83982,13.8843 z" />
      <path
         sodipodi:type="inkscape:box3dside"
         id="path2995"
         style="fill:#d7d7ff;fill-rule:evenodd;stroke:none"
         inkscape:box3dsidetype="14"
         d="m 161.62441,640.43657 0,80.72974 49.92011,19.01153 0,-67.38967 z" />
      <path
         sodipodi:type="inkscape:box3dside"
         id="path2993"
         style="fill:#8686bf;fill-rule:evenodd;stroke:none"
         inkscape:box3dsidetype="3"
         d="m 128.28937,673.39974 33.33504,-32.96317 0,80.72974 -33.33504,19.37092 z" />
    </g>
    <rect
       style="fill:#89414c;fill-opacity:1;stroke:none"
       id="rect3001"
       width="108.08632"
       height="87.88327"
       x="84.852814"
       y="791.7428" />
    <path
       sodipodi:type="arc"
       style="fill:#8bc28b;fill-opacity:1;stroke:none"
       id="path3003"
       sodipodi:cx="273.24628"
       sodipodi:cy="237.21524"
       sodipodi:rx="44.95179"
       sodipodi:ry="43.941635"
       d="m 318.19807,237.21524 a 44.95179,43.941635 0 1 1 -89.90358,0 44.95179,43.941635 0 1 1 89.90358,0 z"
       transform="translate(14.142136,600.48947)" />
    <path
       sodipodi:type="star"
       style="fill:#418942;fill-opacity:1;stroke:none"
       id="path3005"
       sodipodi:sides="5"
       sodipodi:cx="302.03561"
       sodipodi:cy="90.238052"
       sodipodi:r1="66.031837"
       sodipodi:r2="33.015923"
       sodipodi:arg1="0.51155613"
       sodipodi:arg2="1.1398747"
       inkscape:flatsided="false"
       inkscape:rounded="0"
       inkscape:randomized="0"
       d="m 359.61431,122.56293 -43.78767,-2.32723 -26.74102,34.75188 -11.3178,-42.3637 L 236.45339,97.930581 273.24627,74.07561 274.45356,30.24277 308.51061,57.863285 350.5712,45.4664 334.82673,86.391789 z"
       transform="translate(38.385798,620.69252)"
       inkscape:transform-center-x="4.0017682"
       inkscape:transform-center-y="2.3771223" />
  </g>
</svg>

所需的 SVGpan.js文件下载