RE: How to contol pan and zoom within a web page svg file

Andre,

If you want to pan and zoom the SVG file on the developer side, you can do
so by manipulating the "viewBox" attribute of the document's svg element via
the SVG DOM.  This can easily be done in Javascript.  The following test
code uses Adobe's SVG viewer, assumes the HTML has an embedded SVG element
named "SVG1" and a form called "panform", which contains 4 text boxes (vx,
vy, vw, and vh) and a button which invokes the zoomToFormValues() function;
it probably only works under Internet Explorer, but should be easy to adapt
for NN:

<SCRIPT LANGUAGE="Javascript1.2">
<!--
function zoomToRect(rect)
{
	var svgdoc = document.SVG1.getSVGDocument();
	var svgel = svgdoc.documentElement;
	svgel.setAttribute("viewBox",rect.join(" "));
}

function zoomToFormValues()
{
	var rect = new Array( document.panform.vx.value,
				  document.panform.vy.value,
				  document.panform.vw.value,
				  document.panform.vh.value);
	zoomToRect(rect);
}

function populateForm()
{
	var svgdoc = document.SVG1.getSVGDocument();
	var node =
svgdoc.documentElement.attributes.getNamedItem("viewBox");
	if (node != null) {
	  var rect = node.nodeValue.split(" ",4);
	  document.panform.vx.value = rect[0];
	  document.panform.vy.value = rect[1];
	  document.panform.vw.value = rect[2];
	  document.panform.vh.value = rect[3];
	}
}
//-->
</SCRIPT>

Hope that makes sense.  The big caveat with this--at least as far as Adobe's
implementation goes--is that the user can still pan & zoom at will (as
Tobias pointed out) and the viewBox attribute (in the DOM) is not updated
accordingly.  So you can't currently avoid or monitor the user changing the
pan/zoom on their own.  (Will this be addressed in a later release?)

lowell.r.stewart@bender.com
Software Engineer
Lexis Publishing

-----Original Message-----
From: Andre [mailto:andre.simmons@exponent.co.uk]
Sent: Friday, May 12, 2000 7:09 AM
To: www-svg@w3.org
Subject: How to contol pan and zoom within a web page svg file


Could anyone please tell me how to control the pan and zoom (scale) within
a svg file viewed through a web page.
Thanks
Andre

Received on Friday, 12 May 2000 11:38:14 UTC