9 July 2003

5 Behaviors: Viewer Manipulation


Contents


 

5.1 Introduction

SVG Viewers have certain built-in functionalities. For instance, you can zoom in and out via a native contextMenu and pan by dragging the mouse with the Alt key pressed. As well, the 'SVGWindow' object methods, accessible with scripting, allow one to display alert messages (especially useful during the development of an application), load a new document and post data to a URL. These behaviors are all available with the dSVG markup.

Despite the fact that full-blown Web applications can be built with dSVG markup, scripting may still be required for very advanced, non-generic features. dSVG allows the author to easily combine script with dSVG markup via the 'function' element.

5.2 Common Attributes

<!ENTITY % stdBehaviorAttrs
" id ID #IMPLIED event %Text #IMPLIED eventKeyCode %Text #IMPLIED eventKeyID %Text #IMPLIED eventCharCode %Text #IMPLIED eventChar %Text #IMPLIED >

id = "name"
Standard XML attribute for assigning a unique name to an element. Refer to the "Extensible Markup Language (XML) 1.0" Recommendation [XML10].
event = '<string>'
The name of the event that causes the behavior to be executed. This attribute can be set to either the event name or the event attribute name. The allowed values are: click, onclick, mousedown, onmousedown, mouseup, onmouseup, mouseover, onmouseover, mousemove, onmousemove, mouseout, onmouseout, SVGLoad, onload, SVGUnload, onunload, SVGResize, onresize, SVGScroll, onscroll, SVGZoom, onzoom, keydown, onkeydown, keypress, onkeypress, keyup and onkeyup. As well, it can be equal to 'callback', which is a dSVG semantic-level "virtual" event, triggered whenever one interacts with a UI control in such a manner as to cause its associated behaviours to be run. e.g. when a button is clicked on or when an item in a listBox is selected.
eventKeyCode = '<string>'
The value of the 'keyCode' event attribute (automatically generated in response to 'keydown' and 'keyup' events) that causes the behavior to be executed. This attribute is only used if the 'event' attribute is set to 'keydown' or 'keyup' (or 'onkeydown' or 'onkeyup') and the actual event is equal to 'keydown' or 'keyup'.
eventKeyID = '<string>'
The key identifier for the 'keyCode' event attribute (automatically generated in response to 'keydown' and 'keyup' events) that causes the behavior to be executed. The keyID is a string representation of the 'keyCode' attribute of the 'keydown' or 'keyup' event that triggered the behavior, e.g. 'Space', 'Enter', 'A', etc. The keyID's resemble, as closely as possible, the key identifiers listed in the W3C Working Draft of the DOM Level 3 Events Specification. This attribute is only used if the 'event' attribute is set to 'keydown' or 'keyup' (or 'onkeydown' or 'onkeyup') and the actual event is equal to 'keydown' or 'keyup'. If the 'eventKeyCode' attribute is provided, this attribute is ignored.
eventCharCode = '<string>'
The value of the 'charCode' event attribute (automatically generated in response to the 'keypress' events) that causes the behavior to be executed. This attribute is only used if the 'event' attribute is set to 'keypress' (or 'onkeypress') and the actual event is equal to 'keypress'.
eventChar = '<string>'
The string representation of the 'charCode' event attribute (automatically generated in response to the 'keypress' events) that causes the behavior to be executed, e.g. 'a' or 'A'. This attribute is only used if the 'event' attribute is set to 'keypress' (or 'onkeypress') and the actual event is equal to 'keypress'. If the 'eventCharCode' attribute is provided, this attribute is ignored.

5.3 The 'alert' element

The 'alert' element displays a message in a popup window.

<!ENTITY % alertExt "" >
<!ELEMENT dsvg:alert EMPTY >
<!ATTLIST dsvg:alert
  %stdBehaviorAttrs;
  message	%Text;	#IMPLIED >

Attribute definitions:

message = '<string>'
The text to be displayed in the popup window.

Example 302_alert shows a push button with an associated 'alert' behavior.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/alert.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	
	<!-- template -->
	<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
	<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="text_1">dSVG sample behavior: alert</text>
	<line y2="350" x2="744" y1="350" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:button, dsvg:alert</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:alert element is a dialog box used to display a custom message.</text>
		
	<!-- adding behavior -->
	<dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" selected="false" disabled="false" toggle="false" y="70" x="50" label="Fire alert" id="dsvgUniqueID_0">
		<dsvg:alert message="Alert message" id="dsvgUniqueID_2"/>
	</dsvg:button>
</svg>

Example 302_alert
Example 302_alert - button with associated 'alert' behavior

View this example as SVG (SVG-enabled browsers only)  

5.4 The 'function' element

The 'function' element is used to call an existing script function.

<!ENTITY % functionExt "" >
<!ELEMENT dsvg:function EMPTY >
<!ATTLIST dsvg:function
  name		%Text;	#IMPLIED
  parameters	%Text;	#IMPLIED >

Attribute definitions:

name = '<string>'
The name of the script function to call, not including brackets.
parameters = '<string>'
The parameters, separated by commas, to be passed into the script function.

Example 308_function shows a push button that invokes the 'function' behavior, which calls a script function.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/function.js"/>
	
	<!-- template -->
	
	<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
	<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id= "text_1">dSVG sample behavior:
	function</text>
	<text y="365" x="20" font-size="12" id= "content">Content of  file: dsvg:function,
	dsvg:button</text>
	<text y="380" x="20" font-size="12" id= "expected">The dsvg:function element is a named procedure that performs a distinct set of
	parameters.</text>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	
	<!-- adding behavior -->
	
	<dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="70" x="50" label="Call function" id="dsvgUniqueID_0">
		<dsvg:function parameters="sample of dsvg:function" name="alert" id="dsvgUniqueID_1"/>
	</dsvg:button>
</svg>

View this example as SVG (SVG-enabled browsers only)  

5.5 The 'loadURL' element

The 'loadURL' element loads an SVG document and uses it to completely replace the existing SVG document.

<!ENTITY % loadURLExt "" >
<!ELEMENT dsvg:loadURL	(%behaviors;) >
<!ATTLIST dsvg:loadURL
  %stdBehaviorAttrs;
  xmlns:xlink		CDATA		#FIXED 'http://www.w3.org/1999/xlink'
  xlink:href		%URI;		#IMPLIED >

Attribute definitions:

xlink:href = "<uri>"
A reference to the URI that the data will be loaded from.
If the attribute is not specified, nothing will be loaded.

Example 310_loadURL shows a push button with the associated 'loadURL' behavior.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/loadURL.js"/>
	
	<!-- template -->
	
	<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
	<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id= "text_1">dSVG sample behavior:
	loadURL</text>
	<text y="365" x="20" font-size="12" id= "content">Content of  file: dsvg:loadURL,
	dsvg:button</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:loadURL element loads an SVG file.</text>
	<text y="395" x="20" font-size="12" id="depend"/>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	
	<!-- adding behavior -->
	
	<dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="70" x="50" label="loadURL" id="dsvgUniqueID_0">
		<dsvg:loadURL xlink:href="310.svg" id="dsvgUniqueID_1"/>
	</dsvg:button>
</svg>

View this example as SVG (SVG-enabled browsers only)  

5.6 The 'pan' element

The 'pan' element scrolls the document by the specified amount. Internally, this sets the SVG DOM's currentTranslate.x and currentTranslate.y variables, which should trigger a 'scroll' event.

<!ENTITY % panExt "" >
<!ELEMENT dsvg:pan EMPTY >
<!ATTLIST dsvg:pan
  %stdBehaviorAttrs;
  x	%Integer;		#IMPLIED
  y	%Integer;		#IMPLIED
  type	%Type;		'relative' >

Attribute definitions:

x = "<integer>"
The amount to scroll in the x-direction..
y = "<integer>"
The amount to scroll in the y-direction..
type = "(absolute | relative)"
Specifies whether to set the document's current translation to the specified 'x' and 'y' amounts (absolute) or to modify the document's current translation by the specified 'x' and 'y' amounts (relative).
If this attribute is not provided, the default is "relative".

Example 317_pan shows 4 buttons that invoke the 'pan' behavior to scroll the document in all 4 directions.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/pan.js"/>
	
	<!-- template -->
	
	<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
	<text y="25" x="20" font-weight="bold" font-size="18" fill="white" id= "text_1">dSVG sample behavior:
	pan</text>
	<text y="365" x="20" font-size="12" id= "content">Content of   file:
	dsvg:pan</text>
	<text y="380" x="20" font-size="12" id= "expected">The dsvg:pan element translates the x,y coordinates of a document by a specified
	amout.</text>
	<text y="395" x="20" font-size="12" id= "depend">The type of pan can be either relative or
	absolute.</text>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	
	<!-- adding behavior -->
	
	<dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="125" x="100" label="left" id="dsvgUniqueID_0">
		<dsvg:pan type="relative" y="0" x="50" id="dsvgUniqueID_1"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="125" x="300" label="right" id="dsvgUniqueID_5">
		<dsvg:pan type="relative" y="0" x="-50" id="dsvgUniqueID_2"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100" x="200" label="up" id="dsvgUniqueID_6">
		<dsvg:pan type="relative" y="50" x="0" id="dsvgUniqueID_3"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="150" x="200" label="down" id="dsvgUniqueID_7">
		<dsvg:pan type="relative" y="-50" x="0" id="dsvgUniqueID_4"/>
	</dsvg:button>
</svg>

View this example as SVG (SVG-enabled browsers only)  

5.7 The 'postURL' element

The 'postURL' element loads a document or fragment (an element, possibly with children) and inserts it into the specified location in the DOM or into a new documentFragment (a lightweight document useful for storing XML data of a non-native format).

<!ENTITY % postURLExt "" >
<!ELEMENT dsvg:postURL	(%behaviors;) >
<!ATTLIST dsvg:postURL
  %stdBehaviorAttrs;
  xmlns:xlink		CDATA		#FIXED 'http://www.w3.org/1999/xlink'
  xlink:href		%URI;		#IMPLIED
  collection		%Text;		IMPLIED
  mimeType		%Text;		IMPLIED
  synchronous		%Boolean;	"false"
  elementID		ID;		#IMPLIED
  insertAs		%InsertAs;	"child"
  from			%From;		#IMPLIED
  offset		%Integer;	#IMPLIED
  ignoreText		%Boolean;	'false'
  ignoreCData		%Boolean;	'false'
  ignoreComments	%Boolean;	'false' >

Attribute definitions:

xlink:href = "<uri>"
A reference to the URI that the data will be posted to.
If the attribute is not specified, the post will not occur.
collection = '<string>'
The name of the collection group to post. All variables and aliases belonging to this collection group will be posted.
If this attribute is not provided, no data will be posted.
mimeType = '<string>'
The mime type to be reported to the server.
synchronous = "(true | false)"
Specifies whether the returned XML data should be loaded synchronously or asynchronously. If synchronously, the next behavior will not be executed until after the XML has successfully loaded. If asynchronously, the next behavior will be executed immediately, without waiting for the XML to be loaded. For best performance, synchronous loading should only be used when subsequent behaviors will be accessing the XML data being loaded.
If this attribute is not provided, the default is "false".
elementID = "name"
The 'id' attribute of the element at which the loaded element is to be inserted.
insertAs = "(parent | sibling | child | replacement | newDOM)"
Specifies whether the returned XML data is to be inserted as a child of the target element, as the parent of the target element, as a sibling of the target element, as a replacement to the target element, or as a replacement for the entire DOM.
If this attribute is not provided, the default is "child".
offset = "<integer>"
If inserting as a child, 'offset' specifies the number of nodes (not including comment nodes) from the top or bottom (i.e. first or last child) where the returned XML data will be inserted. A negative value specifies up towards the first child. A positive value specifies down towards the last child. If there are fewer nodes than specified by 'offset', the returned element(s) will be inserted as either the first child or the last child.
If inserting as a sibling, 'offset' specifies the number of nodes (not including comment nodes) before (if 'offset' is negative) or after (if 'offset' is positive) the target element where the returned element(s) will be inserted. If there are fewer nodes than specified by 'offset', the element will be inserted as either the first child or the last child of the parent.
If inserting as a parent or replacement, 'offset' is ignored.
If this attribute is not provided, the default is 0.
from = "(top | bottom)"
If inserting as a child, 'from' specifies whether 'offset' is relative to the top (first child) or bottom (last child).
If inserting as a parent, sibling or replacement, 'from' is ignored.
If this attribute is not provided, the default is "bottom".
ignoreText = "(true | false)"
Specifies whether text nodes should be ignored or not when counting 'offset' nodes from the target element.
If this attribute is not provided, the default is 'false'.
ignoreCData = "(true | false)"
Specifies whether CDATA nodes should be ignored or not when counting 'offset' nodes from the target element.
If this attribute is not provided, the default is 'false'.
ignoreComments = "(true | false)"
Specifies whether comment nodes should be ignored or not when counting 'offset' nodes from the target element.
If this attribute is not provided, the default is 'false'.

Example postURL shows a textBox and comboBox whose data and selection gets posted to a URL.

<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="420px" width="760px" onload="init(evt)" viewBox="0 0 760 420">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/textbox.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/combobox.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/contextMenu.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/slider.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/listBox.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/scrollbar.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/postURL.js"/>

	<dsvg:variable saveState="session" collection="project" value="%'text1'@value%" name="text"/>
	<dsvg:variable saveState="session" collection="project" value="%'cboColor'@value%" name="fill"/>
	<dsvg:textBox xlink:href="dsvg/skinTextbox_Default.svg#skinTextBox" autoScale="true" height="22" width="256.615" y="105" x="181" label="Enter the text that will appear on the third page" id="text1"/>
	<dsvg:comboBox xlink:href="dsvg/skinComboBox_Composite.svg#skinComboBox" autoScale="true" height="17" width="256.615" y="179" x="178" label="Enter the color you want for the rectangle" id="cboColor">
		<dsvg:item value="blue" data="blue" id="item1"/>
		<dsvg:item value="green" data="green" id="item2"/>
		<dsvg:item value="red" data="red" id="item3"/>
		<dsvg:item value="purple" data="purple" id="item4"/>
		<dsvg:item value="navy" data="navy" id="item5"/>
	</dsvg:comboBox>
	<dsvg:button xlink:href="dsvg/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="247" x="258" label="postURL" id="postURL">
		<dsvg:postURL insertAs="newDOM" collection="project" xlink:href="http://myURL.com/SessionTest/sgproxy.asp?CXS=Page2" id="dsvgUniqueID_10"/>
	</dsvg:button>
</svg>

5.8 The 'zoom' element

The 'zoom' element scales the document by the specified amount. Internally, this sets the SVG DOM's currentScale variable, which should trigger a 'zoom' event.

<!ENTITY % zoomExt "" >
<!ELEMENT dsvg:zoom EMPTY >
<!ATTLIST dsvg:zoom
  %stdBehaviorAttrs;
  scale	%Number;		#IMPLIED
  cx	%Coordinate;		#IMPLIED
  cy	%Coordinate;		#IMPLIED
  type	%Type;		'relative' >

Attribute definitions:

scale = "<number>"
The scale factor to zoom in or out by. A factor greater than 1 results in zooming in. A factor less than 1 results in zooming out.
cx = "<coordinate>"
The x-coordinate of the location in the document that will stay preserved after the zoom, with respect to the browser window.
y = "<coordinate>"
The y-coordinate of the location in the document that will stay preserved after the zoom, with respect to the browser window.
type = "(absolute | relative)"
Specifies whether to set the document's current scale to the specified 'scale' amount (absolute) or to modify the document's current scale by the specified 'scale' amount (relative).
If this attribute is not provided, the default is "relative".

Example 324_zoom shows two buttons that invoke 'zoom' behaviors--one to zoom the document in by a factor of 2 and one to zoom the document out by a factor of 2.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410">
	<script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/zoom.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/attributeZoomAndPan.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	
	<!-- template -->
	
	<rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/>
	<text y="25" x="20" font-weight="bold" font-size="18" fill= "white" id= "text_1">dSVG sample
	behavior:zoom</text>
	<text y="365" x="20" font-size="12" id= "content">Content of   file: dsvg:zoom,
	dsvg:zoomAndPan</text>
	<text y="380" x="20" font-size="12" id= "expected">The dsvg:zoom element will zoom in / zoom out by the amount specified in the scale
	attribute.</text>
	<text y="395" x="20" font-size="12" id="depend"/>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	
	<!-- adding behavior -->
	
	<dsvg:button dsvg:zoomAndPan="magnify" xlink:href="dsvg/skinButtonZoomIn.svg#skinButtonZoomIn" autoScale="true" disabled="false" selected="false" toggle="false" height="21" width="20" y="100" x="120" label="zoom in" id="button_in">
		<dsvg:zoom type="relative" cy="50.5" cx="50.5" scale="2" id="dsvgUniqueID_2"/>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg/skinButtonZoomOut.svg#skinButtonZoomOut" autoScale="true" disabled="false" selected="false" toggle="false" height="21" width="20" y="100" x="170" label="zoom out" id="button_out">
		<dsvg:zoom type="relative" cy="50.5" cx="50.5" scale="0.5" id="dsvgUniqueID_3"/>
	</dsvg:button>
	<circle dsvg:zoomAndPan="disable" r="30" cy="200" cx="180" stroke-width="5" stroke="darkred" fill="red" id="circle_disabled"/>
	<circle dsvg:zoomAndPan="magnify" r="30" cy="200" cx="350" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="circle_magnified"/>
	<text y="330" x="20" font-size="10" id= "zoom_text">dsvg:zoomAndPan attributes applied to: Red circle (disabled) Blue circle
	(magnify)</text>
	<text y="80" x="50" font-size="10" id= "zoom_text1">Select the Zoom In / Zoom Out
	buttons.</text>
</svg>

View this example as SVG (SVG-enabled browsers only)