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