Recently I've been working on a project that uses SVG (
Scalable Vector Graphics).
I have been using SVGWeb (
http://code.google.com/p/svgweb/) so that the SVG will work in all the major browsers.
It is a fantastic library and I am so grateful to the people who work on it.
The things I found difficult were figuring out how to get zooming with the mouse wheel and dragging to work. I had it working in Firefox, using its native SVG renderer, however SVGWeb does things differently. It took me a while to work out how. I'm going to share what I found here. (Hooking the mouse wheel is actually explained on the SVGWeb mailing list:
Mouse Wheel Events.)
With dragging, I knew I needed to store the old X and Y values of the position of the mouse and take the difference between them and the new mouse position. For some reason setting global variables for the old X and Y values didn't quite work - the delta was very small, approximatley 7.5 times too small.
With zooming, the SVGWeb library doesn't pick up the mouse wheel event. The way to get around this is to attach the mouse wheel event to the container tag (e.g.
div) that is surrounding the
object tag that is holding the SVG on the HTML page.
On to the code!
I did not come up with the Javascript - I took it from various places;
mostly the SVGWeb mailing list entry above and the "photos" demo that
comes with SVGWeb.
This is the main HTML and Javascript for the page that is holding the SVG:
toggle code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>SVG Example</title>
<meta name="svg.render.forceflash" content="true" />
<link rel="SHORTCUT ICON" href="favicon.ico" />
</head>
<body onload="loaded()">
<div id="svgContainer">
<!--[if IE]>
<object id="svgImage" src="example.svg" classid="image/svg+xml" width="100%" height="768px">
<![endif]-->
<!--[if !IE]>-->
<object id="svgImage" data="example.svg" type="image/svg+xml" width="100%" height="768px">
<!--<![endif]-->
</object>
</div>
<script type="text/javascript" src="svg/src/svg.js" data-path="svg/src/" ></script>
<script type="text/javascript">
function loaded()
{
hookEvent("svgContainer", "mousewheel", onMouseWheel);
}
function hookEvent(element, eventName, callback)
{
if(typeof(element) == "string")
element = document.getElementById(element);
if(element == null)
return;
if(element.addEventListener)
{
if(eventName == 'mousewheel')
element.addEventListener('DOMMouseScroll', callback, false);
element.addEventListener(eventName, callback, false);
}
else if(element.attachEvent)
element.attachEvent("on" + eventName, callback);
}
function cancelEvent(e)
{
e = e ? e : window.event;
if(e.stopPropagation)
e.stopPropagation();
if(e.preventDefault)
e.preventDefault();
e.cancelBubble = true;
e.cancel = true;
e.returnValue = false;
return false;
}
function onMouseWheel(e)
{
var doc = document.getElementById("svgImage").contentDocument;
e = e ? e : window.event;
doc.defaultView.onMouseWheel(e);
return cancelEvent(e);
}
</script>
</body>
</html>
This is the SVG and Javascript:
toggle code
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" onload="loaded()" id="svgMain" >
<script type="text/javascript" language="javascript">
<![CDATA[
var isDragging = false;
var mouseCoords = { x: 0, y: 0 };
var gMain = 0;
function loaded()
{
var onloadFunc = doload;
if (top.svgweb)
{
top.svgweb.addOnLoad(onloadFunc, true, window);
}
else
{
onloadFunc();
}
}
function doload()
{
hookEvent('mover', 'mousedown', onMouseDown);
hookEvent('mover', 'mouseup', onMouseUp);
hookEvent('mover', 'mousemove', onMouseMove);
hookEvent('mover', 'mouseover', onMouseOver);
gMain = document.getElementById('gMain');
gMain.vScale = 1.0;
gMover = document.getElementById('mover');
gMover.vTranslate = [50,50];
setupTransform();
}
function onMouseDown(e)
{
isDragging = true;
}
function onMouseUp(e)
{
isDragging = false;
}
function onMouseOver(e)
{
mouseCoords = {x: e.clientX, y: e.clientY};
}
function onMouseMove(e)
{
if(isDragging == true)
{
var g = e.currentTarget;
var pos = g.vTranslate;
var xd = (e.clientX - mouseCoords.x)/gMain.vScale;
var yd = (e.clientY - mouseCoords.y)/gMain.vScale;
g.vTranslate = [ pos[0] + xd, pos[1] + yd ];
g.setAttribute("transform", "translate(" + g.vTranslate[0] + "," + g.vTranslate[1] + ")");
}
mouseCoords = {x: e.clientX, y: e.clientY};
return cancelEvent(e);
}
function setupTransform()
{
gMain.setAttribute("transform", "scale(" + gMain.vScale + "," + gMain.vScale + ")");
}
function hookEvent(element, eventName, callback)
{
if(typeof(element) == "string")
element = document.getElementById(element);
if(element == null)
return;
if(eventName == 'mousewheel')
{
element.addEventListener('DOMMouseScroll', callback, false);
}
else
{
element.addEventListener(eventName, callback, false);
}
}
function cancelEvent(e)
{
e = e ? e : window.event;
if(e.stopPropagation)
e.stopPropagation();
if(e.preventDefault)
e.preventDefault();
e.cancelBubble = true;
e.cancel = true;
e.returnValue = false;
return false;
}
function onMouseWheel(e)
{
e = e ? e : window.event;
var wheelData = e.detail ? e.detail * -1 : e.wheelDelta / 40;
if((gMain.vScale > 0.1) || (wheelData > 0))
{
gMain.vScale += (0.02 * wheelData);
}
setupTransform();
return cancelEvent(e);
}
]]>
</script>
<g id="gMain">
<g transform="translate(50,50)" id="mover">
<circle stroke-width="2" stroke="black" cx="0" cy="0" r="20" fill="red"/>
<text font-family="verdana" text-anchor="middle" transform="translate(0,40)" fill="black" stroke-width="1" font-size="12" >Drag me!</text>
</g>
</g>
</svg>
There is some overlap in the Javascript presented there, this is just to keep things simple if you're copy/pasting this to test for your self.
This Javascript in the main file passes the mouse wheel event info to the SVG document:
function onMouseWheel(e)
{
var doc = document.getElementById("svgImage").contentDocument;
e = e ? e : window.event;
doc.defaultView.onMouseWheel(e);
return cancelEvent(e);
}
The rest of the important Javascript is in the SVG document.
To get dragging to work, first define a global object to hold position information:
var mouseCoords = { x: 0, y: 0 };
When the mouse moves over the desired element, update the object:
function onMouseOver(e)
{
mouseCoords = {x: e.clientX, y: e.clientY};
}
There also needs to be a global boolean to switch dragging on and off. I called mine
isDragging. Toggle dragging when the mouse is up or down on the element.
function onMouseDown(e)
{
isDragging = true;
}
function onMouseUp(e)
{
isDragging = false;
}
When moving the mouse with dragging on, change the position of the element and update the object. Notice that the delta is being divided by the scale. This prevents the movement from becoming erratic.
function onMouseMove(e)
{
if(isDragging == true)
{
var g = e.currentTarget;
var pos = g.vTranslate;
var xd = (e.clientX - mouseCoords.x)/gMain.vScale;
var yd = (e.clientY - mouseCoords.y)/gMain.vScale;
g.vTranslate = [ pos[0] + xd, pos[1] + yd ];
g.setAttribute("transform", "translate(" + g.vTranslate[0] + "," + g.vTranslate[1] + ")");
}
mouseCoords = {x: e.clientX, y: e.clientY};
return cancelEvent(e);
}
And that's how it works.
