我正在研究SVG，我遇到了一个问题，即我想在我的应用程序中实现“对齐网格”功能。
我在SVG中使用了线条，我也在其中实现了拖放功能。现在我想在其中实现“Snap to Grid”功能。
SVG的文件名是（DndD.svg）以该名称保存
这是代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<object data="DndD.svg" id="oo" style="width: 800px" height="500px">
</object>
<span id="trail" style="visibility: hidden"></span>
</body>
<script type="text/javascript">
var far = document.getElementById("oo");
far.addEventListener(
"load",
function () {
var svgDoc = far.contentDocument;
var svgRoot = svgDoc.documentElement;
var r = svgDoc.getElementById("rectangle");
r.onmousemove = function (evt) {
var x = evt.pageX;
var y = evt.pageY;
document.getElementById("trail").style.visibility = "visible";
document.getElementById("trail").style.position = "absolute";
document.getElementById("trail").style.left = evt.clientX + 10;
document.getElementById("trail").style.top = evt.clientY;
document.getElementById("trail").innerHTML = x + "," + y;
};
var line2;
var count = 0;
var xx = 0;
var yy = 0;
line2 = "line_id" + count;
for (var i = 0; i <= 48; i++) {
xx = xx + 10;
var line = svgDoc.createElementNS("http://www.w3.org/2000/svg", "line");
line.setAttribute("id", line2);
line.setAttribute("x1", xx);
line.setAttribute("y1", "0");
line.setAttribute("x2", xx);
line.setAttribute("y2", "400");
line.setAttribute("stroke", "red");
line.setAttribute("stroke-width", "1");
line.setAttribute("pointer-events", "none");
svgRoot.appendChild(line);
}
for (var i = 0; i <= 39; i++) {
yy = yy + 10;
var line = svgDoc.createElementNS("http://www.w3.org/2000/svg", "line");
line.setAttribute("id", line2);
line.setAttribute("x1", "0");
line.setAttribute("y1", yy);
line.setAttribute("x2", "500");
line.setAttribute("y2", yy);
line.setAttribute("stroke", "red");
line.setAttribute("stroke-width", "1");
line.setAttribute("pointer-events", "none");
svgRoot.appendChild(line);
}
var rec = svgDoc.createElementNS("http://www.w3.org/2000/svg", "rect");
rec.setAttribute("id", "btn_rect");
rec.setAttribute("fill", "orange");
rec.setAttribute("stroke", "black");
rec.setAttribute("x", "100px");
rec.setAttribute("y", "100px");
rec.setAttribute("width", "45px");
rec.setAttribute("height", "45px");
rec.setAttribute("rx", "3px");
rec.setAttribute("ry", "3px");
svgRoot.appendChild(rec);
},
false
);
</script>
</html>
SVG CODE其他文件
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="Init(evt)"
onmousedown="Grab(evt)" onmousemove="Drag(evt)" onmouseup="Drop(evt)">
<rect x="0" y="0" width="500px" height="400px" fill="black" stroke="black" id="rectangle" pointer-events="none" />
<script>
< ![CDATA[
var SVGDocument = null;
var SVGRoot = null;
SVG_lay = new Array();
var TrueCoords = null;
var GrabPoint = null;
var BackDrop2 = null;
var DragTarget = null;
function Init(evt) {
SVGDocument = evt.target.ownerDocument;
SVGRoot = SVGDocument.documentElement;
// these svg points hold x and y values...
// very handy, but they do not display on the screen (just so you know)
TrueCoords = SVGRoot.createSVGPoint();
GrabPoint = SVGRoot.createSVGPoint();
// this will serve as the canvas over which items are dragged.
// having the drag events occur on the mousemove over a backdrop
// (instead of the dragged element) prevents the dragged element
// from being inadvertantly dropped when the mouse is moved rapidly
BackDrop2 = SVGDocument.getElementById('BackDrop1');
}
function Grab(evt) {
// find out which element we moused down on
var targetElement = evt.target;
//SVG_lay.push(targetElement);
// you cannot drag the background itself, so ignore any attempts to mouse down on it
if (BackDrop2 != targetElement) {
//set the item moused down on as the element to be dragged
DragTarget = targetElement;
// move this element to the "top" of the display, so it is (almost)
// always over other elements (exception: in this case, elements that are
// "in the folder" (children of the folder group) with only maintain
// hierarchy within that group
DragTarget.parentNode.appendChild(DragTarget);
// turn off all pointer events to the dragged element, this does 2 things:
// 1) allows us to drag text elements without selecting the text
// 2) allows us to find out where the dragged element is dropped (see Drop)
DragTarget.setAttributeNS(null, 'pointer-events', 'none');
// we need to find the current position and translation of the grabbed element,
// so that we only apply the differential between the current location
// and the new location
var transMatrix = DragTarget.getCTM();
GrabPoint.x = TrueCoords.x - Number(transMatrix.e);
GrabPoint.y = TrueCoords.y - Number(transMatrix.f);
}
};
function Drag(evt) {
// account for zooming and panning
GetTrueCoords(evt);
// if we don't currently have an element in tow, don't do anything
if (DragTarget) {
// account for the offset between the element's origin and the
// exact place we grabbed it... this way, the drag will look more natural
var newX = TrueCoords.x - GrabPoint.x;
var newY = TrueCoords.y - GrabPoint.y;
// apply a new tranform translation to the dragged element, to display
// it in its new location
DragTarget.setAttributeNS(null, 'transform', 'translate(' + newX + ',' + newY + ')');
}
};
function Drop(evt) {
// if we aren't currently dragging an element, don't do anything
if (DragTarget) {
// since the element currently being dragged has its pointer-events turned off,
// we are afforded the opportunity to find out the element it's being dropped on
var targetElement = evt.target;
// turn the pointer-events back on, so we can grab this item later
DragTarget.setAttributeNS(null, 'pointer-events', 'all');
if ('BackDrop1' == targetElement.parentNode.id) {
// if the dragged element is dropped on an element that is a child
// of the folder group, it is inserted as a child of that group
targetElement.parentNode.appendChild(DragTarget);
alert(DragTarget.id + ' has been dropped into a folder, and has been inserted as a child of the containing group.');
}
else {
// for this example, you cannot drag an item out of the folder once it's in there;
// however, you could just as easily do so here
// alert(DragTarget.id + ' has been dropped on top of ' + targetElement.id);
if ('bin' == targetElement.id) {
//targetElement.parentNode.appendChild( DragTarget );
var ch = SVGDocument.getElementById(DragTarget.id);
var pa = ch.parentNode;
pa.removeChild(ch);
}
}
// set the global variable to null, so nothing will be dragged until we
// grab the next element
DragTarget = null;
}
};
function GetTrueCoords(evt) {
// find the current zoom level and pan setting, and adjust the reported
// mouse position accordingly
var newScale = SVGRoot.currentScale;
var translation = SVGRoot.currentTranslate;
TrueCoords.x = (evt.clientX - translation.x) / newScale;
TrueCoords.y = (evt.clientY - translation.y) / newScale;
};
]]>
</script>
</svg>