请教关于SVG问题

[pqda]

请问我用java脚本来控制一个svg的放大缩小和移动，但是在移动过程中，经常会出现svg移动出屏幕，请问我要是想控制他不会出现移出我开始定的740×600的范围应该如何在脚本中写呢？多谢了
===================================================================
我是菜鸟别踩我！！！
===================================================================

[孟子E章]

判断屏幕，然后加比例因子

[孟子E章]

<?xml version="1.0" encoding="UTF-8"?>
<svg id="body" viewBox="0 0 -100 525">
<g>
<path fill="#E0EEE0" stroke="#000000" d="M350,250 l0,-199.99999999879537 a200,200 0 0 1 108.66331450718796,32.09441914945231 L350,250" />
<text text-anchor="start" x="409.4845333794973" y="58.19135033219314" dy="-10">Mxh001 (9.1%)</text>
</g>
<g>
<path fill="#A0A0EE" stroke="#000000" d="M350,250 l108.66331450718796,-167.90558084934307 a200,200 0 0 1 76.98264777329687,242.30703706065202 L350,250" />
<text text-anchor="start" x="550.1418511445523" y="189.44145522946582" dy="-10">Mxh002 (21.9%)</text>
</g>
<g>
<path fill="#EE9090" stroke="#000000" d="M350,250 l185.64596228048484,74.40145621130897 a200,200 0 0 1 -226.45146055854315,121.39157560133539 L350,250" />
<text text-anchor="start" x="449.21621437751486" y="426.270619633814" dy="15">Mxh003 (22.2%)</text>
</g>
<g>
<path fill="#70EE70" stroke="#000000" d="M350,250 l-40.80549827805832,195.7930318126441 a200,200 0 0 1 -154.77046100496068,-237.62656082331932 L350,250" />
<text text-anchor="end" x="174.03289370996208" y="359.15290204120356" dy="15">Mxh004 (25.1%)</text>
</g>
<g>
<path fill="#5050EE" stroke="#000000" d="M350,250 l-195.57595928301902,-41.83352901067521 a200,200 0 0 1 22.021708226919116,-57.559237049992234 L350,250" />
<text text-anchor="end" x="153.86476528406143" y="178.53353573793635" dy="-10">Mxh005 (4.9%)</text>
</g>
<g>
<path fill="#EE3030" stroke="#000000" d="M350,250 l-173.5542510560999,-99.39276606066744 a200,200 0 0 1 173.55425105610027,-100.60723393812793 L350,250" />
<text text-anchor="end" x="244.6816846905523" y="76.9703013727846" dy="-10">Mxh006 (16.7%)</text>
</g>
<text text-anchor="middle" stroke="#000099" font-size-adjust="+1" x="150" y="500" dx="400">
% Sales by Product ID
</text>
</svg>

[pqda]

孟子E章，你好，你的帖子说实话我没有从中看出解决我的问题的方法，因为我接触时间不长，所以希望你能够再详细的说一下，多谢了。

我的svg是这样设计的，首先有一个ToolBar，上面是一些按钮，来控制绘图区域的放大缩小移动删除等操作，绘图区域是先画了一个有颜色的矩形，因为svg好像不能设置背景色吧，如果想有颜色就先要画一个相应颜色的图形，因为这个图形就是固定大小的，所以在我移动他的时候经常移动出边界，露出下面的白色。请问应该如何判断根据有颜色图形所在位置，控制其移动不出边界。
代码如下：


drawbox.svg
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve"
width="740" height="600"
onload="initDrawPanel(evt)"
enableZoomAndPanControls="true">

<g id="drawPanel" onclick="CreateElement(evt)">
<rect width="740" height="600" fill="green"/>
</g>
</svg>
===================================================================
我是菜鸟别踩我！！！
===================================================================

[pqda]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20000303 Stylable//EN"
"http://www.w3.org/TR/2000/03/WD-SVG-20000303/DTD/svg-20000303-stylable.dtd">
<svg xml:space="preserve"
width="60" height="600"
onload="initToolBar(evt)"
enableZoomAndPanControls="false">

<rect width="60" height="600" fill="#4084CB"/>
<g onmouseover="mouseOnTool(evt, 'arrowBorder', 'arrowTip')" onmouseout="mouseOutTool(evt, 'arrowBorder', 'arrowTip')">
<rect id="arrowBorder" style="display:none" x="8" y="8" width="44" height="44" fill="#4084CB" stroke="blue" stroke-width="1"/>
<path id="arrow" d="M 13 13 L 21 38 L 24 30 L 40 46 L 46 40 L 30 24 L 38 21 z" fill="red" stroke="red" stroke-width="1"/>
<g id="arrowTip" style="display:none">
<path style="display:inline;fill:yellow;" d="M52,52c0,3.2-10.4,5.9-23.3,5.9c-12.9,0-23.3-2.6-23.3-5.9c0-3.2,10.4-5.9,23.3-5.9c12.9,0,23.3,2.6,23.3,5.9z"/>
<text transform="matrix(1 0 0 1 17 57)" style="display:inline;fill:blue">
<tspan x="0" y="0">选择</tspan>
</text>
</g>
</g>
<g onmouseover="mouseOnTool(evt, 'textBorder', 'textTip')" onmouseout="mouseOutTool(evt, 'textBorder', 'textTip')">
<rect id="textBorder" style="display:none" x="8" y="59" width="44" height="44" fill="#4084CB" stroke="blue" stroke-width="1"/>
<line x1="19" y1="74" x2="19" y2="84" fill="red" stroke="red" stroke-width="1"/>
<line x1="20" y1="74" x2="20" y2="84" fill="red" stroke="red" stroke-width="1"/>
<line x1="38" y1="74" x2="38" y2="84" fill="red" stroke="red" stroke-width="1"/>
<line x1="39" y1="74" x2="39" y2="84" fill="red" stroke="red" stroke-width="1"/>
<line x1="40" y1="74" x2="40" y2="84" fill="red" stroke="red" stroke-width="1"/>
<line x1="28" y1="68" x2="28" y2="94" fill="red" stroke="red" stroke-width="1"/>
<line x1="29" y1="68" x2="29" y2="94" fill="red" stroke="red" stroke-width="1"/>
<line x1="30" y1="69" x2="30" y2="93" fill="red" stroke="red" stroke-width="1"/>
<line x1="31" y1="69" x2="31" y2="69" fill="red" stroke="red" stroke-width="1"/>
<line x1="21" y1="75" x2="37" y2="75" fill="red" stroke="red" stroke-width="1"/>
<line x1="21" y1="83" x2="37" y2="83" fill="red" stroke="red" stroke-width="1"/>
<g id="textTip" style="display:none">
<path style="display:inline;fill:yellow;" d="M52,103c0,3.2-10.4,5.9-23.3,5.9c-12.9,0-23.3-2.6-23.3-5.9c0-3.2,10.4-5.9,23.3-5.9c12.9,0,23.3,2.6,23.3,5.9z"/>
<text transform="matrix(1 0 0 1 17 108)" style="display:inline;fill:blue">
<tspan x="0" y="0">文字</tspan>
</text>
</g>
</g>
<g onmouseover="mouseOnTool(evt, 'nodeBorder', 'nodeTip')" onmouseout="mouseOutTool(evt, 'nodeBorder', 'nodeTip')">
<rect id="nodeBorder" style="display:none" x="8" y="110" width="44" height="44" fill="#4084CB" stroke="blue" stroke-width="1"/>
<rect x="13" y="115" width="34" height="33" fill="#4084CB" stroke="red" stroke-width="1"/>
<line x1="13" y1="126" x2="47" y2="126" fill="red" stroke="red" stroke-width="1"/>
<line x1="13" y1="133" x2="47" y2="133" fill="red" stroke="red" stroke-width="1"/>
<line x1="13" y1="140" x2="47" y2="140" fill="red" stroke="red" stroke-width="1"/>
<line x1="30" y1="126" x2="30" y2="148" fill="red" stroke="red" stroke-width="1"/>
<g id="nodeTip" style="display:none">
<path style="display:inline;fill:yellow;" d="M52,154c0,3.2-10.4,5.9-23.3,5.9c-12.9,0-23.3-2.6-23.3-5.9c0-3.2,10.4-5.9,23.3-5.9c12.9,0,23.3,2.6,23.3,5.9z"/>
<text transform="matrix(1 0 0 1 17 159)" style="display:inline;fill:blue">
<tspan x="0" y="0">表格</tspan>
</text>
</g>
</g>
<g onmouseover="mouseOnTool(evt, 'zoomOutBorder', 'zoomOutTip')" onmouseout="mouseOutTool(evt, 'zoomOutBorder', 'zoomOutTip')" onclick="zoom(1.1)">
<rect id="zoomOutBorder" style="display:none" x="8" y="161" width="44" height="44" fill="#4084CB" stroke="blue" stroke-width="1"/>
<circle cx="30" cy="183" r="15" fill="#4084CB" stroke="red" stroke-width="2"/>
<line x1="19" y1="183" x2="41" y2="183" fill="red" stroke="red" stroke-width="5"/>
<line x1="30" y1="172" x2="30" y2="194" fill="red" stroke="red" stroke-width="5"/>
<g id="zoomOutTip" style="display:none">
<path style="display:inline;fill:yellow;" d="M52,205c0,3.2-10.4,5.9-23.3,5.9c-12.9,0-23.3-2.6-23.3-5.9c0-3.2,10.4-5.9,23.3-5.9c12.9,0,23.3,2.6,23.3,5.9z"/>
<text transform="matrix(1 0 0 1 17 210)" style="display:inline;fill:blue">
<tspan x="0" y="0">放大</tspan>
</text>
</g>
</g>
<g onmouseover="mouseOnTool(evt, 'zoomInBorder', 'zoomInTip')" onmouseout="mouseOutTool(evt, 'zoomInBorder', 'zoomInTip')" onclick="zoom(0.9)">
<rect id="zoomInBorder" style="display:none" x="8" y="212" width="44" height="44" fill="#4084CB" stroke="blue" stroke-width="1"/>
<circle cx="30" cy="234" r="15" fill="#4084CB" stroke="red" stroke-width="2"/>
<line x1="19" y1="234" x2="41" y2="234" fill="red" stroke="red" stroke-width="5"/>
<g id="zoomInTip" style="display:none">
<path style="display:inline;fill:yellow;" d="M52,256c0,3.2-10.4,5.9-23.3,5.9c-12.9,0-23.3-2.6-23.3-5.9c0-3.2,10.4-5.9,23.3-5.9c12.9,0,23.3,2.6,23.3,5.9z"/>
<text transform="matrix(1 0 0 1 17 261)" style="display:inline;fill:blue">
<tspan x="0" y="0">缩小</tspan>
</text>
</g>
</g>
<g onmouseover="mouseOnTool(evt, 'moveBorder', 'moveTip')" onmouseout="mouseOutTool(evt, 'moveBorder', 'moveTip')">
<rect id="moveBorder" style="display:none" x="8" y="263" width="44" height="44" fill="#4084CB" stroke="blue" stroke-width="1"/>
<path id="toUp" d="M 30 266 L 22 274 L 26 274 L 26 280 L 30 284 L 34 280 L 34 274 L 38 274 z" fill="red" stroke="red" stroke-width="1" onclick='pan(0,-1)'/>
<path id="toLeft" d="M 11 285 L 19 277 L 19 281 L 25 281 L 29 285 L 25 289 L 19 289 L 19 293 z" fill="red" stroke="red" stroke-width="1" onclick='pan(-1,0)'/>
<path id="toRight" d="M 49 285 L 41 277 L 41 281 L 35 281 L 31 285 L 35 289 L 41 289 L 41 293 z" fill="red" stroke="red" stroke-width="1" onclick='pan(1,0)'/>
<path id="toDown" d="M 30 304 L 22 296 L 26 296 L 26 290 L 30 286 L 34 290 L 34 296 L 38 296 z" fill="red" stroke="red" stroke-width="1" onclick='pan(0,1)'/>
<g id="moveTip" style="display:none">
<path style="display:inline;fill:yellow;" d="M52,307c0,3.2-10.4,5.9-23.3,5.9c-12.9,0-23.3-2.6-23.3-5.9c0-3.2,10.4-5.9,23.3-5.9c12.9,0,23.3,2.6,23.3,5.9z"/>
<text transform="matrix(1 0 0 1 17 312)" style="display:inline;fill:blue">
<tspan x="0" y="0">移动</tspan>
</text>
</g>
</g>
<g onmouseover="mouseOnTool(evt, 'resetBorder', 'resetTip')" onmouseout="mouseOutTool(evt, 'resetBorder', 'resetTip')" onclick='reset()'>
<rect id="resetBorder" style="display:none" x="8" y="314" width="44" height="44" fill="#4084CB" stroke="blue" stroke-width="1"/>
<path d="M22,350 a15,15 0 1,1 15,0" fill="none" stroke="red" stroke-width="5"/>
<path d="M22,350 l2.5,-4.33 l5,8.66 l-10,0z" fill="red" stroke="red" stoke-width="2"/>
<g id="resetTip" style="display:none">
<path style="display:inline;fill:yellow;" d="M52,358c0,3.2-10.4,5.9-23.3,5.9c-12.9,0-23.3-2.6-23.3-5.9c0-3.2,10.4-5.9,23.3-5.9c12.9,0,23.3,2.6,23.3,5.9z"/>
<text transform="matrix(1 0 0 1 17 363)" style="display:inline;fill:blue">
<tspan x="0" y="0">清除</tspan>
</text>
</g>
</g>
</svg>

===================================================================
我是菜鸟别踩我！！！
===============================================================