W3C home > Mailing lists > Public > www-svg@w3.org > May 2000

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

From: Stewart, Lowell R. (LNG-MBC) <Lowell.R.Stewart@bender.com>
Date: Fri, 12 May 2000 11:37:33 -0400
Message-ID: <71032D854E94D211ABBD0008C709956BD72984@MBCSFOEXC01.BENDER.COM>
To: www-svg@w3.org

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,

function populateForm()
	var svgdoc = document.SVG1.getSVGDocument();
	var node =
	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];

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?)

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.
Received on Friday, 12 May 2000 11:38:14 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 8 March 2017 09:46:48 UTC