实现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文件下载