今天在网上查询在SVGView下对SVG图形进行平移操作的JS代码时发现了有不少对SVG图形中某些图元进行移动的文档,而没有整图平移的代码。
参考这些代码,自己写了整图平移的代码。
代码如下(记得将下面代码保存成UTF-8编码格式的svg文件):
<?xml version='1.0' standalone='no'?>
<svg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'
οnlοad='Init(evt)' οnmοusedοwn='Grab(evt)' οnmοusemοve='Drag(evt)'
οnmοuseup='Drop(evt)'>
<title>Drag And Drop</title>
<desc>
A nice little demo of drag-and-drop functionality in SVG,
written by Doug Schepers on February 16, 2004. Use or misuse
this code however you wish.
</desc>
<script type="text/javascript"><![CDATA[
var svgdoc = null; // SVG文档对象
var svgroot = null; // SVG文档的根节点
var check = false; // 图像拖动标志
var TrueCoords = null; //
var GrabPoint = null;
var BackDrop = null; // 背景对象
var WholeMap = null; // 整图对象
/**
* @功能: 初始化函数
**/
function Init(evt) {
svgdoc = evt.target.ownerDocument;
svgroot = svgdoc.documentElement;
TrueCoords = svgroot.createSVGPoint();
GrabPoint = svgroot.createSVGPoint();
BackDrop = svgdoc.getElementById('BackDrop');
WholeMap = svgdoc.getElementById('whole');
}
/**
* @功能:处理鼠标落下的事件
* @param evt:事件句柄
**/
function Grab(evt) {
if (evt.button != 0) {
// 非左键不响应
return;
}
var transMatrix = WholeMap.getCTM();
GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
GrabPoint.y = TrueCoords.y - Number(transMatrix.f);
check = true;
// alert(GrabPoint.x+":"+GrabPoint.y);
}
/**
* @功能:处理鼠标移动事件
* @param evt:事件句柄
**/
function Drag(evt) {
GetTrueCoords(evt);
if (check == true) {
var newX = TrueCoords.x - GrabPoint.x;
var newY = TrueCoords.y - GrabPoint.y;
WholeMap.setAttributeNS(null, 'transform', 'translate(' + newX + ','
+ newY + ')');
}
}
/**
* @功能:处理鼠标松开事件
* @param evt:事件句柄
**/
function Drop(evt) {
check = false;
}
/**
* @功能:获取鼠标移动位置
* @param evt:事件句柄
**/
function GetTrueCoords(evt) {
var newScale = svgroot.currentScale;
var translation = svgroot.currentTranslate;
TrueCoords.x = (evt.clientX - translation.x) / newScale;
TrueCoords.y = (evt.clientY - translation.y) / newScale;
};
]]></script>
<rect id='BackDrop' x='-10%' y='-10%' width='110%' height='110%'
fill='none' pointer-events='all' />
<g id="whole">
<circle id='BlueCircle' cx='25' cy='25' r='20' style='fill:blue; ' />
<circle id='RedCircle' cx='125' cy='25' r='20' style='fill:red; ' />
<circle id='OrangeCircle' cx='225' cy='25' r='20'
style='fill:orange; ' />
<text id='DraggableText' x='20' y='200'
style='fill:red; font-size:18px; font-weight:bold;'>
Draggable Text
</text>
<rect id='GreenRectangle' x='50' y='70' width='100' height='100'
style='fill:green; ' />
<g id='Folder'>
<rect id='FolderRectangle' x='300' y='100' width='200'
height='150' style='fill:tan; stroke:brown; stroke-width:3;' />
</g>
</g>
</svg>