9 July 2003

6 Behaviors: DOM Manipulation


Contents


 

6.1 Introduction

Manipulating the DOM is the key to creating dynamic, interactive Web applications. With the exception of using SMIL markup for animation, visual changes only occur as a result of the DOM changing. dSVG's markup allows one to:

Rather than providing behavior elements that correspond directly to DOM methods, the DOM methods have instead been abstracted using the dSVG markup. This allows for the creation of a more direct linkage between the syntax and the intent of the author. Take the example of a designer creating a new element dynamically in the DOM. The designer wishes to create a circle at a particular location in the DOM tree.

To accomplish this with script requires over a hundred lines of code, accessing over a dozen different DOM properties and methods. You must first use getElementById() to find the target element, and then either the parent or sibling element. You then use createElement() to create the circle. If inserting beneath a parent, you use parent.appendChild(). If inserting before a sibling, you use sibling.insertBefore(). If inserting after a sibling you use sibling.nextSibling.insertBefore(), unless there is no nextSibling, in which case you use sibling.parentNode.appendChild(). The author may wish to insert it as, say, the fourth sibling from the top or bottom, requiring you to write a loop which counts the siblings and accounts for the fact that maybe there aren't that many siblings. Or the author may wish the new element to be the parent of existing elements, which requires removal of those elements and appending them as the children of the new one. Then finally you use setAttribute() to set its ID so that you can refer to it later. That is quite complicated. But this task can all be accomplished with dSVG's 'createElement' or 'copyElement' elements.

The dSVG elements 'setStyle' and 'setTransform' make modifying the 'style' and 'transform' attributes much easier for the author. These attributes are very difficult to modify with script because they do not map directly to one value but instead are composed of a string of separate properties or property-value pairs themselves.

For instance, if an element contains a 'style' attribute which sets the stroke width to 1, and you want to change the stroke-width to 2, you cannot directly set the stroke-width value--you have to instead generate the string "stroke-width:2". But it is complicated further by the fact that the 'style' attribute might have more style properties defined, such as style=”stroke-width:1;fill:red;opacity:0.5“, so simply setting the 'style' attribute to “stroke:2” would accidentally remove the other style properties. So you must first get the value of the 'style' attribute, parse it, determine if it already has the property you want to set, set it or replace it, and write the new delimited string out again. This is all done for you with dSVG's 'setStyle' element.

Modifying a 'transform' attribute has similar problems except it is made even more difficult by its syntax of transform=”matrix(a b c d e f) translate(x [y]) scale(sx [sy] rotate(angle [cx cy]) skewX(angle) skewY(angle))“. It is even more complicated by the fact that the final transfomation depends on the order of these individual transformations. And if you want, say, to apply a scale factor to an element, this could have the effect of also translating the element, so you need to calculate the transformation required to preserve the elements centre or edge coordinates. Again, this is all handled for you with dSVG's 'setTransform' element. These elements and others effectively abstract the author from having to understand the details of SVG's syntax.

6.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.

6.3 The 'copyElement' element

The 'copyElement' element creates a copy of an existing element and inserts it into the DOM at the specified location.

<!ENTITY % copyElementExt "" >
<!ELEMENT dsvg:copyElement ANY >
<!ATTLIST dsvg:copyElement
  %stdBehaviorAttrs;
  sourceElementID	ID;		#IMPLIED
  targetElementID	ID;		#IMPLIED
  newElementID		ID;		#IMPLIED
  insertAs		%InsertAs;	child
  offset		%Integer;	#IMPLIED
  from			%From;		#IMPLIED
  ignoreText		%Boolean;	'false'
  ignoreCData		%Boolean;	'false'
  ignoreComments	%Boolean;	'false' >

Attribute definitions:

sourceElementID = "name"
The 'id' attribute of the element to be copied.
If this attribute is not provided, the child elements are copied.
targetElementID = "name"
The 'id' attribute of the element where the copied element is to be inserted.
newElementID = "name"
The value of the copied element's 'id' attribute.
insertAs = "(parent | sibling | child | replacement)"
Specifies whether the copied element 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, or as a replacement to the target element.
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 where the copied element 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 element 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 copied element 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 zero.
offset = "(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 325_copyElement shows two push buttons which invoke two different ways of using the 'copyElement' 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/copyElement.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setStyle.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/zoom.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: copyElement
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:copyElement
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:copyElement will copy the specified target element and generate a cloned element.
	</text>
	<text y="395" x="20" font-size="12" id="depend">Clicking the button will create a solid blue circle with a dark blue border over the transparent one.
	</text>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	
	<!-- adding behavior -->
	
	<circle r="25" cy="100" cx="250" opacity="0.25" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="circle1"/>
	<circle r="25" cy="240" cx="250" style="opacity:0.25;stroke-width:5;stroke:darkblue;fill:#5f86B1" id="circle2"/>
	<text y="180" x="30">Copy element used with sourceElementID mode of operation.
	</text>
	<text y="320" x="30">Copy element used in conjunction with setStyle.
	</text>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="100" x="50" label="copyElement" id="dsvgUniqueID_3">
		<dsvg:copyElement insertAs="child" newElementID="circle3" event="onclick" id="dsvgUniqueID_1">
			<circle r="25" cy="100" cx="250" stroke-width="5" stroke="darkblue" fill="#5f86B1"/>
		</dsvg:copyElement>
	</dsvg:button>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="240" x="50" label="copyElement" id="button2">
		<dsvg:copyElement insertAs="sibling" sourceElementID="circle2" newElementID="circle4" event="onclick"/>
		<dsvg:setStyle value="1" property="opacity" elementID="circle4" event="onclick"/>
	</dsvg:button>
</svg>

Example 325_copyElement (before)
Example 325_copyElement (before) - buttons with associated 'copyElement' behaviors
Example 325_copyElement (after)
Example 325_copyElement (after) - buttons with associated 'copyElement' behaviors

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

6.4 The 'createElement' element

The 'createElement' element creates a new element and inserts it into the DOM at the specified location.

<!ENTITY % createElementExt "" >
<!ELEMENT dsvg:createElement ANY >
<!ATTLIST dsvg:createElement
  %stdBehaviorAttrs;
  newElementID		ID;		#IMPLIED
  elementID		ID;		#IMPLIED
  elementName		%Text;		#IMPLIED
  ns			%Text;		#IMPLIED
  insertAs		%InsertAs;	child
  from			%From;		#IMPLIED
  offset		%Integer;	#IMPLIED
  ignoreText		%Boolean;	'false'
  ignoreCData		%Boolean;	'false'
  ignoreComments	%Boolean;	'false' >

Attribute definitions:

newElementID = "name"
The value of the created element's 'id' attribute.
elementID = "name"
The 'id' attribute of the element where the created element will be inserted.
elementName = '<string>'
The name of the element to be created (e.g. rect, ellipse, etc.).
ns = '<string>'
The namespace of the element. The associated prefix for this namespace will be added in front of the element name, separated by a colon.
insertAs = "(parent | sibling | child | replacement)"
Specifies whether the created element 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, or as a replacement to the target element.
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 where the new element 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 element 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 new element 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 zero.
offset = "(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 306_createElement shows a push button that creates a circle with the 'createElement' 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/createElement.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setAttribute.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: createElement
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file: dsvg:createElement, dsvg:setAttribute
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:createElement will create a new solid circle over top of the transparent one when the button is selected.
	</text>
	<text y="395" x="20" font-size="12" id="depend">The new element is inserted into the specified location within the DOM.
	</text>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	
	<!-- adding behavior -->
	
	<circle r="25" cy="140" cx="250" opacity="0.25" stroke-width="5" stroke="darkblue" fill="#5f86B1"/>
	<text y="70" x="30">Pressing the button will create a solid blue circle with a dark blue border over top of the transparent one.
	</text>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="130" x="50" label="Create" id="dsvgUniqueID_7">
		<dsvg:createElement insertAs="child" elementID="thedoc" elementName="circle" newElementID="circle2" event="onclick"/>
		<dsvg:setAttribute value="25" attribute="r" elementID="circle2" event="onclick"/>
		<dsvg:setAttribute value="250" attribute="cx" elementID="circle2" event="onclick"/>
		<dsvg:setAttribute value="140" attribute="cy" elementID="circle2" event="onclick"/>
		<dsvg:setAttribute value="#5f86B1" attribute="fill" elementID="circle2" event="onclick"/>
		<dsvg:setAttribute value="darkblue" attribute="stroke" elementID="circle2" event="onclick"/>
		<dsvg:setAttribute value="5" attribute="stroke-width" elementID="circle2" event="onclick"/>
	</dsvg:button>
</svg>

Example 306_createElement (before)
Example 306_createElement (before) - button with associated 'createElement' behavior
Example 306_createElement (after)
Example 306_createElement (after) - button with associated 'createElement' behavior

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

6.5 The 'findElements' element

The 'findElements' element finds all the elements that match the specified search criteria, as defined by the 'attributeCondition', 'elementCondition', 'and' and 'or' elements.

<!ENTITY % findElementsExt "" >
<!ELEMENT dsvg:findElements ANY >
<!ATTLIST dsvg:findElements
  %stdBehaviorAttrs;
  parentID	ID;		#IMPLIED
  recursive	%Boolean;	#IMPLIED
  nodeList	%Text;		#IMPLIED
  targetDocID	ID;		#IMPLIED >

Attribute definitions:

parentID = "name"
The 'id' attribute of the element whose children are to be searched.
recursive = "(true | false)"
Specifies whether the all child elements should be searched (true) or just the immediate/direct child elements should be searched (false).
If this attribute is not provide, the default is 'false'.
nodeList = '<string>'
The identifier for the resulting nodelist, which will be stored in memory. This identifier can be used by the 'loop' element.
targetDocID = "name"
The identifier for the documentFragment used to store actual copies of the elements with matching search criteria. This identifier can be used by the 'postURL' element.

Example 326_findElements shows a push button that invokes the 'findElements' behavior, storing the matches in a nodelist, and using the 'loop' element to display the ID's of the nodes via the 'alert' element.

<?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/findElements.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/loop.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: findElements
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:findElements
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:findElements will find the NodeID's and return them to an output list.
	</text>
	<text y="395" x="20" font-size="12" id="depend">The conditions specified can include the use of ' * ' wildcards when searching for IDs.
	</text>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
		
	<!-- Tree structure -->
	
	<text y="140" x="50" id="text_g1ID">group 1 id="one"
	</text>
	<text y="140" x="290" id="text_g2ID">group 2 id="two"
	</text>
	<g id="one">
		<rect height="40" width="40" y="50" x="30" stroke-width="5" stroke="darkgreen" fill="green" id="rect_1"/>
		<text y="105" x="30" id="text_rect1">id="rect_1"
		</text>
		<rect height="30" width="30" y="50" x="110" stroke-width="5" stroke="darkgreen" fill="green" id="rect_2"/>
		<text y="105" x="110" id="text_rect2">id="rect_2"
		</text>
		<text y="120" x="110" id="text_textwidth">width="30"
		</text>
		<g id="two">
			<rect height="40" width="40" y="50" x="230" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="three"/>
			<text y="105" x="230" id="text_three">id="three"
			</text>
			<rect height="40" width="50" y="50" x="310" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="four"/>
			<text y="105" x="310" id="text_four">id="four"
			</text>
			<rect height="40" width="40" y="50" x="390" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="five"/>
			<text y="105" x="390" id="text_five">id="five"
			</text>
		</g>
		<text y="190" x="310" id="condition_title">findElements conditions are:
		</text>
		<text y="210" x="330" id="text_a">nodeID begins with a 't' and ends with an 'o'
		</text>
		<text y="225" x="330" id="condition_b">nodeID begins with an 'f' and ends with an 'e'
		</text>
		<text y="240" x="330" id="condition_c">OR the element width attribute contains a '3'
		</text>
	</g>
	
	<!-- adding behavior -->
	<dsvg:findElements recursive="true" nodeList="outputList" parentID="one" id="test">
		<dsvg:or>
			<dsvg:and>
				<dsvg:elementCondition nodeID="t*"/>
				<dsvg:elementCondition nodeID="*o"/>
			</dsvg:and>
			<dsvg:and>
				<dsvg:elementCondition nodeID="f*"/>
				<dsvg:elementCondition nodeID="*e*"/>
			</dsvg:and>
			<dsvg:attributeCondition value="*3*" name="width"/>
		</dsvg:or>
	</dsvg:findElements>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="270" x="50" label="Return find" id="button_find">
		<dsvg:loop nodeList="outputList" id="LOOP">
			<dsvg:alert message="%LOOP@elementID%"/>
		</dsvg:loop>
	</dsvg:button>
	<text y="310" x="20" id="text_select">Selecting the button will return the nodeID's that will be added to the  outputList
	</text>
</svg>

Example 326_findElements
Example 326_findElements - button with associated 'findElements', 'loop' and 'alert' behaviors

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

6.5.1 The 'and' element

The 'and' element is used as a container for the 'elementCondition' and 'attributeCondition' elements, which are used as children of the 'findElements' element to define the search parameters. If all of the conditions defined as children of the 'and' element are met, then the element being analyzed is a match (subject to any other conditions that may also be defined).

<!ENTITY % andExt "" >
<!ELEMENT dsvg:and (dsvg:elementCondition|dsvg:attributeCondition|dsvg:or|dsvg:and)* >
<!ATTLIST dsvg:and
  id	ID;	#IMPLIED >

Attribute definitions:

id = "name"
Standard XML attribute for assigning a unique name to an element.  

6.5.2 The 'or' element

The 'or' element is used as a container for the 'elementCondition' and 'attributeCondition' elements, which are used as children of the 'findElements' element to define the search parameters. If any of the conditions defined as children of the 'or' element are met, then the element being analyzed is a match (subject to any other conditions that may also be defined).

<!ENTITY % orExt "" >
<!ELEMENT dsvg:or (dsvg:elementCondition|dsvg:attributeCondition|dsvg:or|dsvg:and)* >
<!ATTLIST dsvg:or
  id	ID;	#IMPLIED >

Attribute definitions:

id = "name"
Standard XML attribute for assigning a unique name to an element.  

6.5.3 The 'attributeCondition' element

The 'attributeCondition' element is used as a child of the 'findElements' element to define the search parameters for the attributes. If the condition is met, then the element being analyzed is a match (subject to any other conditions that may also be defined).

<!ENTITY % attributeConditionExt "" >
<!ELEMENT dsvg:attributeCondition EMPTY >
<!ATTLIST dsvg:attributeCondition
  id	ID;	#IMPLIED
  name	%Text;	#IMPLIED
  value	%Text;	#IMPLIED >

Attribute definitions:

id = "name"
Standard XML attribute for assigning a unique name to an element.
name = '<string>'
The name of the attribute being evaluated. e.g. 'width'.
value = '<string>'
The value that the specified attribute must have in order to be considered a match. This string may include wildcard "*" characters. e.g. name="width" value="*3*" would match all elements whose 'width' attribute contains the digit "3".

6.5.4 The 'elementCondition' element

The 'elementCondition' element is used as a child of the 'findElements' element to define the search parameters for the element ID's. If the condition is met, then the element being analyzed is considered to be a match (subject to any other conditions that may also be defined).

<!ENTITY % elementConditionExt "" >
<!ELEMENT dsvg:elementCondition EMPTY >
<!ATTLIST dsvg:elementCondition
  id		ID;	#IMPLIED
  nodeID	ID;	#IMPLIED >

Attribute definitions:

id = "name"
Standard XML attribute for assigning a unique name to an element.
nodeID = "name"
The value that the 'id' attribute must have in order to be considered a match. This string may include wildcard "*" characters. e.g. nodeID="t*" would match all elements whose 'id' attribute begins with the letter "t".

6.6 The 'loadXML' element

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

<!ENTITY % loadXMLExt "" >
<!ELEMENT dsvg:loadXML	(%Behaviors;) >
<!ATTLIST dsvg:loadXML
  %stdBehaviorAttrs;
  %XlinkAttrs;
  synchronous		%Boolean;	"false"
  elementID		ID;		#IMPLIED
  insertAs		%InsertAs;	"sibling"
  from			%From;		#IMPLIED
  offset		%Integer;	#IMPLIED
  ignoreText		%Boolean;	'false'
  ignoreCData		%Boolean;	'false'
  ignoreComments	%Boolean;	'false' >

Attribute definitions:

synchronous = "(true | false)"
Specifies whether the XML should be loaded synchronously or asynchronously. If synchronously, the next behavior will not be executed until 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 where the loaded element will be inserted.
insertAs = "(parent | sibling | child | replacement)"
Specifies whether the created element 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, or as a replacement to the target element.
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 where the new element 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 element 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 new element 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 zero.
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 311_loadXML shows the basic and advanced uses of the 'loadXML' 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" xmlns:vp="http://www.corel.com/schemas/2002/VP" 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/loadXML.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setData.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setAttribute.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/if.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/switch.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/findElements.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/loop.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/alert.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setTransform.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/spinBox.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/textbox.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setData.js"/>
	
	<!-- Template -->
	
	<g id="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_label">dSVG sample behavior: loadXML		
		</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">Section 1 illustrates basic usage of dsvg:loadXML.		
		</text>
		<text y="380" x="20" font-size="12" id="expected">Section 2 illustrates how loadXML can be used synchronously with non-linear events.		
		</text>
		<text y="395" x="20" font-size="12" id="expected_2">Section 3 illustrates how the 'docID' attribute can be used to retrieve data from outside document fragments.		
		</text>
		<line y2="350" x2="400" y1="40" x1="400" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="vert_line"/>
		<line y2="205" x2="744" y1="205" x1="400" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="midR_line"/>
	</g>
	<g transform="translate(-30,0)" id="groups">
		<g id="group_1">
			<rect height="62" width="100" y="40" x="50" stroke-width="2" stroke="#5f86B1" fill-opacity=".2" fill="none" id="rect_1"/>
			<text y="70" x="80" id="text_1">group 1
			</text>
		</g>
		<g id="group_2">
			<rect height="62" width="100" y="102" x="50" stroke-width="2" stroke="#5f86B1" fill-opacity=".2" fill="none" id="rect_2"/>
			<text y="132" x="80" id="text_2">group 2			
			</text>
		</g>
		<g id="group_3">
			<rect height="62" width="100" y="164" x="50" stroke-width="2" stroke="#5f86B1" fill-opacity=".2" fill="none" id="rect_3"/>
			<text y="194" x="80" id="text_3">group 3			
			</text>
		</g>
		<g id="group_4">
			<rect height="62" width="100" y="226" x="50" stroke-width="2" stroke="#5f86B1" fill-opacity=".2" fill="none" id="rect_4"/>
			<text y="256" x="80" id="text_4">group 4			
			</text>
		</g>
		<g id="group_5">
			<rect height="62" width="100" y="288" x="50" stroke-width="2" stroke="#5f86B1" fill-opacity=".2" fill="none" id="rect_5"/>
			<text y="318" x="80" id="text_5">group 5			
			</text>
		</g>
	</g>
	<g id="group_text">
		<text y="300" x="140" font-weight="bold" font-size="12" id="text_result_label">Resulting load order		
		</text>
		<text y="320" x="140" id="text_result">.....		
		</text>
	</g>
	<g id="group_buttons">
		<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="70" x="190" label="basic" id="button_load1">			
			<dsvg:loadXML insertAs="replacement" elementID="group_1" synchronous="true" xlink:href="311_loadXML.svg#group_1" id="dsvgUniqueID_a"/>			
			<dsvg:setData value="%'text_1'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>			
			<dsvg:setAttribute value="#5f86B1" attribute="fill" elementID="rect_1" id="dsvgUniqueID_3"/>			
			<dsvg:loadXML insertAs="replacement" elementID="group_2" synchronous="true" xlink:href="311_loadXML.svg#group_2" id="dsvgUniqueID_b"/>			
			<dsvg:setData value="%'text_1'@cdata, 'text_2'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>			
			<dsvg:setAttribute value="#5f86B1" attribute="fill" elementID="rect_2" id="dsvgUniqueID_3"/>			
			<dsvg:loadXML insertAs="replacement" elementID="group_3" synchronous="true" xlink:href="311_loadXML.svg#group_3" id="dsvgUniqueID_1"/>			
			<dsvg:setData value="%'text_1'@cdata, 'text_2'@cdata, 'text_3'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>			
			<dsvg:setAttribute value="#5f86B1" attribute="fill" elementID="rect_3" id="dsvgUniqueID_3"/>			
			<dsvg:loadXML insertAs="replacement" elementID="group_4" synchronous="true" xlink:href="311_loadXML.svg#group_4" id="dsvgUniqueID_1"/>			
			<dsvg:setData value="%'text_1'@cdata, 'text_2'@cdata, 'text_3'@cdata, 'text_4'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>			
			<dsvg:setAttribute value="#5f86B1" attribute="fill" elementID="rect_4" id="dsvgUniqueID_3"/>			
			<dsvg:loadXML insertAs="replacement" elementID="group_5" synchronous="true" xlink:href="311_loadXML.svg#group_5" id="dsvgUniqueID_1"/>
			<dsvg:setData value="%'text_1'@cdata, 'text_2'@cdata, 'text_3'@cdata, 'text_4'@cdata, 'text_5'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>	
			<dsvg:setAttribute value="#5f86B1" attribute="fill" elementID="rect_5" id="dsvgUniqueID_3"/>
		</dsvg:button>
		<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="100" x="190" label="w/ if" id="button_load2">	
			<dsvg:if value2="none" op="equal" value1="%rect_1@fill%" id="if_none">
				<dsvg:loadXML insertAs="replacement" elementID="group_1" synchronous="true" xlink:href="311_loadXML.svg#group_1" id="dsvgUniqueID_a"/>		
				<dsvg:setData value="%'text_1'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>		
				<dsvg:setAttribute value="red" attribute="fill" elementID="rect_1" id="dsvgUniqueID_3"/>
				<dsvg:loadXML insertAs="replacement" elementID="group_2" synchronous="true" xlink:href="311_loadXML.svg#group_2" id="dsvgUniqueID_b"/>
				<dsvg:setData value="%'text_1'@cdata, 'text_2'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>		
				<dsvg:setAttribute value="red" attribute="fill" elementID="rect_2" id="dsvgUniqueID_3"/>
				<dsvg:loadXML insertAs="replacement" elementID="group_3" synchronous="true" xlink:href="311_loadXML.svg#group_3" id="dsvgUniqueID_1"/>
				<dsvg:setData value="%'text_1'@cdata, 'text_2'@cdata, 'text_3'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>		
				<dsvg:setAttribute value="red" attribute="fill" elementID="rect_3" id="dsvgUniqueID_3"/>
				<dsvg:loadXML insertAs="replacement" elementID="group_4" synchronous="true" xlink:href="311_loadXML.svg#group_4" id="dsvgUniqueID_1"/>
				<dsvg:setData value="%'text_1'@cdata, 'text_2'@cdata, 'text_3'@cdata, 'text_4'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>		
				<dsvg:setAttribute value="red" attribute="fill" elementID="rect_4" id="dsvgUniqueID_3"/>
				<dsvg:loadXML insertAs="replacement" elementID="group_5" synchronous="true" xlink:href="311_loadXML.svg#group_5" id="dsvgUniqueID_1"/>
				<dsvg:setData value="%'text_1'@cdata, 'text_2'@cdata, 'text_3'@cdata, 'text_4'@cdata, 'text_5'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>		
				<dsvg:setAttribute value="red" attribute="fill" elementID="rect_5" id="dsvgUniqueID_3"/>	
			</dsvg:if>	
			<dsvg:if value2="#5f86B1" op="equal" value1="%rect_1@fill%" id="if_blue">
				<dsvg:loadXML insertAs="replacement" elementID="group_1" synchronous="true" xlink:href="311_loadXML.svg#group_1" id="dsvgUniqueID_a"/>		
				<dsvg:setData value="%'text_1'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>
				<dsvg:setAttribute value="yellow" attribute="fill" elementID="rect_1" id="dsvgUniqueID_3"/>
				<dsvg:loadXML insertAs="replacement" elementID="group_2" synchronous="true" xlink:href="311_loadXML.svg#group_2" id="dsvgUniqueID_b"/>
				<dsvg:setData value="%'text_1'@cdata, 'text_2'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>
				<dsvg:setAttribute value="yellow" attribute="fill" elementID="rect_2" id="dsvgUniqueID_3"/>
				<dsvg:loadXML insertAs="replacement" elementID="group_3" synchronous="true" xlink:href="311_loadXML.svg#group_3" id="dsvgUniqueID_1"/>
				<dsvg:setData value="%'text_1'@cdata, 'text_2'@cdata, 'text_3'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>
				<dsvg:setAttribute value="yellow" attribute="fill" elementID="rect_3" id="dsvgUniqueID_3"/>
				<dsvg:loadXML insertAs="replacement" elementID="group_4" synchronous="true" xlink:href="311_loadXML.svg#group_4" id="dsvgUniqueID_1"/>
				<dsvg:setData value="%'text_1'@cdata, 'text_2'@cdata, 'text_3'@cdata, 'text_4'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>
				<dsvg:setAttribute value="yellow" attribute="fill" elementID="rect_4" id="dsvgUniqueID_3"/>
				<dsvg:loadXML insertAs="replacement" elementID="group_5" synchronous="true" xlink:href="311_loadXML.svg#group_5" id="dsvgUniqueID_1"/>
				<dsvg:setData value="%'text_1'@cdata, 'text_2'@cdata, 'text_3'@cdata, 'text_4'@cdata, 'text_5'@cdata%" elementID="text_result" id="dsvgUniqueID_2"/>
				<dsvg:setAttribute value="yellow" attribute="fill" elementID="rect_5" id="dsvgUniqueID_3"/>	
			</dsvg:if>
		</dsvg:button>
		<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="130" x="190" label="w/ loop" id="button_load3">	
			<dsvg:findElements nodeList="group_numbers" parentID="groups" id="dsvgUniqueID_52">		
				<dsvg:elementCondition nodeID="group*" id="dsvgUniqueID_53"/>	
			</dsvg:findElements>	
			<dsvg:loop nodeList="group_numbers" id="groupLoop">
				<dsvg:setData value="%groupLoop@elementID%" elementID="text_result" id="dsvgUniqueID_2"/>
				<dsvg:loadXML insertAs="replacement" elementID="%groupLoop@elementID%" synchronous="true" xlink:href="311_loadXML.svg#%groupLoop@elementID%" id="dsvgUniqueID_57"/>
				<dsvg:setAttribute value="blue" attribute="fill" elementID="%groupLoop@elementID%" id="dsvgUniqueID_56"/>
				<dsvg:setTransform scale="0.8" vAlign="middle" hAlign="middle" elementID="%groupLoop@elementID%" id="dsvgUniqueID_57"/>	
			</dsvg:loop>
		</dsvg:button>
		<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="250" x="190" label="reset default" id="button_reset">	
			<dsvg:findElements recursive="true" nodeList="group_numbers" parentID="groups" id="find_rect">		
				<dsvg:elementCondition nodeID="group*" id="dsvgUniqueID_60"/>	
			</dsvg:findElements>	
			<dsvg:loop nodeList="group_numbers" id="loopGroup">
				<dsvg:loadXML insertAs="replacement" elementID="%loopGroup@elementID%" synchronous="true" xlink:href="311_loadXML.svg#%loopGroup@elementID%" id="dsvgUniqueID_61"/>		
				<dsvg:setData value="....." elementID="text_result" id="dsvgUniqueID_2"/>	
			</dsvg:loop>
		</dsvg:button>
		<text y="55" x="160" id="button_label">1. Basic loadXML samples
		</text>	
	</g>
	
	<!-- Testing w and w/out loadXML -->
	
	<g id="w_wOut">
		<text y="55" x="470" id="sync_text">2. Synchronization of non-linear events</text>
		<text y="190" x="420" font-size="10" id="sync_text">This sample goes through a series of loops / conditional statements.</text>
		<text y="200" x="420" font-size="10" id="sync_text">The resulting location is returned to an alert.</text>
		<g id="calData">
			<text id="A">1st value</text>
			<text id="B">2nd value</text>
		</g>
		<g id="calendar1">
			<circle id="circ" r="7" cy="150" cx="575" stroke="#5f86B1" fill="none"/>
		</g>
		<dsvg:button dsvg:share="shareFind" xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="70" x="525" label="with loadXML" id="bmjan">
			<dsvg:setAttribute value="visible" attribute="visibility" elementID="pleaseWaitBox" id="dsvgUniqueID_54"/>
			<dsvg:loadXML insertAs="replacement" elementID="calendar1" synchronous="true" xlink:href="load_sample.svg#ListIcon1" id="dsvgUniqueID_36b"/>
			<dsvg:setAttribute value="hidden" attribute="visibility" elementID="pleaseWaitBox" id="dsvgUniqueID_55"/>
			<dsvg:setAttribute value="calendar1" attribute="id" elementID="ListIcon1" id="foo1"/>
		</dsvg:button>
		<dsvg:button dsvg:share="shareFind" xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="100" x="525" label="without loadXML" id="bmjanb">
			<dsvg:setAttribute value="visible" attribute="visibility" elementID="pleaseWaitBox" id="dsvgUniqueID_54b"/>
			<dsvg:setAttribute value="hidden" attribute="visibility" elementID="pleaseWaitBox" id="dsvgUniqueID_55b"/>
		</dsvg:button>
		<dsvg:share id="shareFind">
			<dsvg:findElements nodeList="calItems" parentID="calData" id="dsvgUniqueID_99">	
				<dsvg:elementCondition nodeID="*" id="dsvgUniqueID_100"/>
			</dsvg:findElements>
			<dsvg:loop increment="1" to="1" from="0" id="calItemsLoop">
				<dsvg:alert message="alert1:%calItemsLoop@value + '" id="dsvgUniqueID_1b"/>
				<dsvg:loadXML insertAs="replacement" elementID="calendar1" synchronous="true" xlink:href="load_sample.svg#ListIcon2" id="dsvgUniqueID_36extra"/>			
				<dsvg:setAttribute value="calendar1" attribute="id" elementID="ListIcon2" id="foo2"/>						
				<dsvg:if value2="a" op="equal" value1="a" id="dsvgUniqueID_2b">		
					<dsvg:alert message="alert2:%calItemsLoop@value + '%" id="dsvgUniqueID_3b"/>			
				</dsvg:if>		
				<dsvg:loop increment="1" to="2" from="0" id="test">				
					<dsvg:alert message="alert3:%test@value + '%" id="dsvgUniqueID_1c"/>				
					<dsvg:loadXML insertAs="replacement" elementID="calendar1" synchronous="true" xlink:href="load_sample.svg#ListIcon3" id="dsvgUniqueID_36extraextra"/>											
					<dsvg:setAttribute value="calendar1" attribute="id" elementID="ListIcon1" id="foo3"/>				
					<dsvg:if value2="a" op="equal" value1="a" id="dsvgUniqueID_2c">	
						<dsvg:alert message="alert4:%test@value + '%" id="dsvgUniqueID_3c"/>				
					</dsvg:if>	
					<dsvg:loop nodeList="calItems" id="byEl">			
						<dsvg:alert message="alert_item:%byEl@elementID%" id="fooal"/>				
					</dsvg:loop>
				</dsvg:loop>
			
				<dsvg:if value2="b" op="equal" value1="b" id="dsvgUniqueID_2b">
					<dsvg:alert message="alert5:%calItemsLoop@value + '%" id="dsvgUniqueID_3b"/>
				</dsvg:if>	
			</dsvg:loop>
	
		</dsvg:share>
		<g id="groupDocID">
			<text y="225" x="575" text-anchor="middle" id="sync_text">3. dsvg:loadXML using docID attribute.</text>
			<text y="240" x="465" font-size="10" id="sync_texta">- The docID attribute is intended for arbitrary XML</text>
			<text y="250" x="465" font-size="10" id="sync_textb">- Allows access to data that resides in an outside fragment.</text>
			<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="270" x="525" label="load DocID" id="buttonDocID">
				<dsvg:loadXML docID="frag" synchronous="true" xlink:href="fragment.svg" id="dsvgUniqueID_1" />
				<dsvg:setData elementID="sync_text2" value="The 'cx' value for the ellipse within fragment.svg is: %frag.fragellipse1@cx%" id="dsvgUniqueID_0"/>
			</dsvg:button>
			<text y="320" x="575" font-size="10" text-anchor="middle" id="sync_textc">the cx value from fragment (fragment.svg#ellipse1) will be placed here.</text>
			<text y="340" x="575" text-anchor="middle" font-weight="bold" font-size="10" fill="#5f86B1" id="sync_text2"></text>
		</g>		
		<g visibility="hidden" id="pleaseWaitBox">
			<rect height="75" width="216" y="167.5" x="457" stroke-width="1.5" stroke="#222222" fill="white"/>
			<rect height="75" width="216" y="166.5" x="456" stroke-width="1.5" stroke="#999999" fill="white"/>
			<rect height="65" width="206" y="170" x="461" fill="#5D80D5"/>
			<text startOffset="0" y="205" x="525" text-anchor="center" font-weight="bold" font-size="16" font-family="verdana" fill="WHITE">Loading...
			</text>
		</g>
	</g>
</svg>

Example 311_loadXML (before)
Example 311_loadXML (before) - button with associated 'loadXML' behavior
Example 311_loadXML (after)
Example 311_loadXML (after) - button with associated 'loadXML' behavior

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

6.7 The 'moveElement' element

The 'moveElement' element moves an existing element to a specified location in the DOM.

<!ENTITY % moveElementExt "" >
<!ELEMENT dsvg:moveElement ANY >
<!ATTLIST dsvg:moveElement
  %stdBehaviorAttrs;
  sourceElementID	ID;		#IMPLIED
  targetElementID	ID;		#IMPLIED
  insertAs		%InsertAs;	child
  offset		%Integer;	#IMPLIED
  from			%From;		#IMPLIED
  ignoreText		%Boolean;	'false'
  ignoreCData		%Boolean;	'false'
  ignoreComments	%Boolean;	'false' >

Attribute definitions:

sourceElementID = "name"
The 'id' attribute of the element to be moved.
targetElementID = "name"
The 'id' attribute of the target element where the moved element will be inserted.
insertAs = "(parent | sibling | child | replacement)"
Specifies whether the moved element 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, or as a replacement to the target element.
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 where the new element 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 element 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 new element 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 zero.
offset = "(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 316_moveElement shows radioButtons that invoke different 'moveElement' behaviors.

<?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/moveElement.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/button.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setAttribute.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/if.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/alert.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_title">dSVG sample behavior: moveElement
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:moveElement
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:moveElement will move the source element to a specified target location within the DOM.
	</text>
	<text y="395" x="20" font-size="12" id="depend">The rectangle within the chart will track the location where the element is being inserted.
	</text>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	
	<!-- adding chart -->
	
	<g id="chart">
		<text y="65" x="400" font-size="10" id="g1">Root SVG
		</text>
		<line y2="320" x2="450" y1="70" x1="450" stroke="black" id="tree_vert2"/>
		<line y2="70" x2="400" y1="70" x1="450" stroke="black" id="svg_horz"/>
		<line y2="120" x2="450" y1="120" x1="500" stroke="black" id="_horz"/>
		<text y="120" x="435" font-size="10" id="g1_text">G1
		</text>
		<text y="160" x="525" visibility="hidden" font-weight="bold" font-size="10" fill="blue" id="g1_level1text">('child' of G1 level 2)
		</text>
		<text y="150" x="500" visibility="visible" font-weight="bold" font-size="10" fill="black" id="g1_level2text">G1 level 2
		</text>
		<line y2="125" x2="500" y1="115" x1="500" stroke="black" id="g1_marker1"/>
		<line y2="170" x2="450" y1="170" x1="500" stroke="black" id="g2_horz"/>
		<text y="170" x="435" font-size="10" id="g2_text">G2
		</text>
		<text y="195" x="500" font-size="10" id="g2_level2text">G2 level 2
		</text>
		<text y="205" x="500" visibility="hidden" font-weight="bold" font-size="10" fill="green" id="g2_level2textsibling">('sibling' of G2 level 2)
		</text>
		<line y2="165" x2="500" y1="175" x1="500" stroke="black" id="g2_marker1"/>
		<line y2="220" x2="450" y1="220" x1="500" stroke="black" id="g3_horz"/>
		<text y="220" x="435" font-size="10" id="g3_text">G3
		</text>
		<text y="240" x="475" visibility="hidden" font-weight="bold" font-size="10" fill="orange" id="g3_level2text2a">('parent' of G3 level 2)
		</text>
		<text y="250" x="500" font-size="10" id="g3_level2text2b">G3 level 2
		</text>
		<line y2="215" x2="500" y1="225" x1="500" stroke="black" id="g3_marker1"/>
		<line y2="270" x2="450" y1="270" x1="500" stroke="black" id="g4_horz"/>
		<text y="270" x="435" font-size="10" id="g4_text">G4
		</text>
		<text y="300" x="500" font-size="10" id="g4_level2text">G4 level 2
		</text>
		<text y="320" x="435" font-size="10" id="g5_textNode">G5
		</text>
		<text y="285" x="450" visibility="hidden" font-weight="bold" font-size="10" fill="red" id="g4_replacetext">('replacement' of G4)
		</text>
		<line y2="275" x2="500" y1="265" x1="500" stroke="black" id="g4_marker1"/>
	</g>
	<rect height="5" width="5" y="85" x="440" id="rect_1"/>
	<text y="90" x="460" font-size="10" id="g5_text">* Original location of element within the DOM.
	</text>
	<g id="sampleGroup"/>
	<g id="group1">
		<g id="group1_level2"/>
	</g>
	<g id="group2">
		<g id="group2_level2"/>
	</g>
	<g id="group3">
		<g id="group3_level2">
			<g id="group3_level3a"/>
			<g id="group3_level3b">
				<rect height="5" width="5" y="265" x="515" visibility="hidden" fill="orange" id="rect_2"/>
			</g>
		</g>
	</g>
	<g id="group4"/>
	<g id="group5"/>
	
	<!-- adding behavior -->
	
	<g id="radioGroup">
		<dsvg:radioButton xlink:href="dsvg11/skinRadioButton_Default.svg#skinRadioButton" autoScale="true" group="default" height="14" width="14" y="110" x="100" label="moveElement: child" id="rb_child">
			<dsvg:if value2="true" op="equal" value1="%rb_child@selected%" id="dsvgUniqueID_33">
				<dsvg:moveElement from="top" offset="1" insertAs="child" targetElementID="group1_level2" sourceElementID="sampleGroup" event="onclick"/>
				<dsvg:setAttribute value="blue" attribute="fill" elementID="rect_1" id="set_fill"/>
				<dsvg:setAttribute value="515" attribute="x" elementID="rect_1" id="set_x"/>
				<dsvg:setAttribute value="155" attribute="y" elementID="rect_1" id="set_y"/>
				<dsvg:setAttribute value="visible" attribute="visibility" elementID="g1_level1text" id="set_text"/>
			</dsvg:if>
		</dsvg:radioButton>
		<dsvg:radioButton xlink:href="dsvg11/skinRadioButton_Default.svg#skinRadioButton" autoScale="true" group="default" height="14" width="14" y="150" x="100" label="moveElement: sibling" id="rb_sibling">
			<dsvg:if value2="true" op="equal" value1="%rb_sibling@selected%" id="dsvgUniqueID_39">
				<dsvg:moveElement from="top" offset="1" insertAs="sibling" targetElementID="group2_level2" sourceElementID="sampleGroup" event="onclick"/>
				<dsvg:setAttribute value="green" attribute="fill" elementID="rect_1" id="set_fill"/>
				<dsvg:setAttribute value="490" attribute="x" elementID="rect_1" id="set_x"/>
				<dsvg:setAttribute value="200" attribute="y" elementID="rect_1" id="set_y"/>
				<dsvg:setAttribute value="visible" attribute="visibility" elementID="g2_level2textsibling" id="set_text"/>
			</dsvg:if>
		</dsvg:radioButton>
		<dsvg:radioButton xlink:href="dsvg11/skinRadioButton_Default.svg#skinRadioButton" autoScale="true" group="default" height="14" width="14" y="190" x="100" label="moveElement: parent" id="rb_parent">
			<dsvg:if value2="true" op="equal" value1="%rb_parent@selected%" id="dsvgUniqueID_40">
				<dsvg:moveElement insertAs="parent" targetElementID="group3_level2" sourceElementID="sampleGroup" event="onclick"/>
				<dsvg:setAttribute value="orange" attribute="fill" elementID="rect_1" id="set_fill"/>
				<dsvg:setAttribute value="465" attribute="x" elementID="rect_1" id="set_x"/>
				<dsvg:setAttribute value="235" attribute="y" elementID="rect_1" id="set_y"/>
				<dsvg:setAttribute value="visible" attribute="visibility" elementID="g3_level2text2a" id="set_text"/>
			</dsvg:if>
		</dsvg:radioButton>
		<dsvg:radioButton xlink:href="dsvg11/skinRadioButton_Default.svg#skinRadioButton" autoScale="true" group="default" height="14" width="14" y="230" x="100" label="moveElement: replacement" id="rb_replace">
			<dsvg:if value2="true" op="equal" value1="%rb_replace@selected%" id="dsvgUniqueID_41">
				<dsvg:moveElement insertAs="replacement" targetElementID="group4" sourceElementID="sampleGroup" event="onclick"/>
				<dsvg:setAttribute value="red" attribute="fill" elementID="rect_1" id="set_fill"/>
				<dsvg:setAttribute value="440" attribute="x" elementID="rect_1" id="set_x"/>
				<dsvg:setAttribute value="265" attribute="y" elementID="rect_1" id="set_y"/>
				<dsvg:setAttribute value="visible" attribute="visibility" elementID="g4_replacetext" id="set_text"/>
				<dsvg:setAttribute value="hidden" attribute="visibility" elementID="g4_text" id="set_text"/>
				<dsvg:setAttribute value="hidden" attribute="visibility" elementID="g4_level1text" id="set_text"/>
				<dsvg:setAttribute value="hidden" attribute="visibility" elementID="g4_level2text" id="set_text"/>
			</dsvg:if>
		</dsvg:radioButton>
		<text y="70" x="50" font-size="12" id="text_dom">Select radio buttons to move element within the DOM.
		</text>
		<text y="320" x="50" font-size="12" id="text_illustrate">*Note: The chart on the right illustrates the corresponding DOM.
		</text>
	</g>
</svg>

Example 316_moveElement
Example 316_moveElement - radioButtons with associated 'moveElement' behaviors

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

6.8 The 'printElement' element

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

<!ENTITY % printElementExt "" >
<!ELEMENT dsvg:printElement	(%Behaviors;) >
<!ATTLIST dsvg:printElement
  %stdBehaviorAttrs;
  elementID		ID;		#IMPLIED
  insertLineBreaks		%Boolean;	"false"
  string			%Text;		#IMPLIED >

Attribute definitions:

elementID = "name"
The 'id' attribute of the element to be converted to text. All children of the element will also be converted to text.
insertLineBreaks = "(true | false)"
Specifies whether each element should have a line break character placed after it (true) or not (false).
If this attribute is not provided, the default is "false".
string = '<string>'
The attribute used for storing the target element(s) after being converted to text format.

Example 327_printElement shows a circle that, when clicked on, converts the 'circle' element and its children to text and displays it.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "../SVGdSVG.dtd">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" 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/printElement.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setData.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: printElement
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:printElement
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:printElement will print the specified target node.
	</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 -->
	
	<text y="70" x="40" font-size="12" style="" id="text_dir">Click the circle to print the selected node. 
	</text>
	<circle r="50" cy="150" cx="150" stroke-width="5" stroke="black" fill="#5f86B1" id="myCircle">
		<dsvg:printElement insertLineBreaks="true" elementID="myCircle" event="onclick" id="markup"/>
		<dsvg:setData value="%markup@string%" elementID="textMarkup" event="onclick"/>
	</circle>
	<text y="220" x="5" font-size="10" id="textMarkup"> 
	</text>
</svg>

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

6.9 The 'removeElement' element

The 'removeElement' element removes an element and its children from the DOM.

<!ENTITY % removeElementExt "" >
<!ELEMENT dsvg:removeElement	(%Behaviors;) >
<!ATTLIST dsvg:removeElement
  %stdBehaviorAttrs;
  elementID		ID;		#IMPLIED >

Attribute definitions:

elementID = "name"
The 'id' attribute of the element to be removed from the DOM.

Example 318_removeElement shows a button which invokes the 'removeElement' behavior to remove an ellipse.

<?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/removeElement.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: removeElement
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:removeElement
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:removeElement will remove the specified target element from the DOM.
	</text>
	<text y="395" x="20" font-size="12" id="depend">The element that will be removed is referenced by its ID.
	</text>
	<line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/>
	
	<!-- adding behavior -->
	
	<ellipse ry="25" rx="50" cy="150" cx="250" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="shape1"/>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100" x="50" label="remove" id="dsvgUniqueID_0">
		<dsvg:removeElement elementID="shape1" id="dsvgUniqueID_1"/>
	</dsvg:button>
</svg>

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

6.10 The 'replaceElement' element

The 'replaceElement' element replaces a specified element in the DOM with a new element.

<!ENTITY % replaceElementExt "" >
<!ELEMENT dsvg:replaceElement	(%Behaviors;) >
<!ATTLIST dsvg:replaceElement
  %stdBehaviorAttrs;
  elementID		ID;		#IMPLIED
  preserveChildren	%boolean;	"false"
  preserveEvents	%boolean;	"false"
  preserveStyle		%boolean;	"false" >

Attribute definitions:

elementID = "name"
The 'id' attribute of the element to be replaced.
preserveChildren = "(true | false)"
Specifies whether to copy the child elements of the original element and append them as children of the new element (true) or remove them along with the original element (false).
preserveEvents = "(true | false)"
Specifies whether to copy the event attributes (onmouseover, onclick, etc.) from the original element to the new element (true) or not (false).
preserveStyle = "(true | false)"
Specifies whether to copy the 'style' attribute from the original element to the new element (true) or not (false).

Example 319_replaceElement shows a button which invokes the 'replaceElement' behavior to remove an ellipse.

<?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/replaceElement.js"/>
	<script type="text/ecmascript" xlink:href="dsvg11/setAttribute.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: replaceElement
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:replaceElement
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:replaceElement will replace a specified target element in the DOM with another element.
	</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 -->
	
	<ellipse ry="50" rx="25" cy="150" cx="250" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="shape1"/>
	<dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100" x="50" label="replace" id="dsvgUniqueID_0">
		<dsvg:replaceElement elementID="shape1" elementName="rect" id="dsvgUniqueID_1"/>
		<dsvg:setAttribute value="100" attribute="width" elementID="shape1" id="dsvgUniqueID_2"/>
		<dsvg:setAttribute value="50" attribute="height" elementID="shape1" id="dsvgUniqueID_3"/>
		<dsvg:setAttribute value="darkblue" attribute="fill" elementID="shape1" id="dsvgUniqueID_2"/>
		<dsvg:setAttribute value="#5f86B1" attribute="stroke" elementID="shape1" id="dsvgUniqueID_3"/>
		<dsvg:setAttribute value="250" attribute="x" elementID="shape1" id="dsvgUniqueID_2"/>
		<dsvg:setAttribute value="150" attribute="y" elementID="shape1" id="dsvgUniqueID_3"/>
		<dsvg:setAttribute value="5" attribute="stroke-width" elementID="shape1" id="dsvgUniqueID_2"/>
	</dsvg:button>
</svg>

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

6.11 The 'setAttribute' element

The 'setAttribute' element sets the value of the target element's specified attribute.

<!ENTITY % setAttributeExt "" >
<!ELEMENT dsvg:setAttribute ANY >
<!ATTLIST dsvg:setAttribute
  %stdBehaviorAttrs;
  elementID	ID;		#IMPLIED
  attribute	%Text;		#IMPLIED
  value		%Text;		#IMPLIED >

Attribute definitions:

elementID = "name"
The 'id' attribute of the element whose attribute is to be set.
If this attribute is not provided, no action will occur.
attribute = '<string>'
The name of the attribute to be set.
value = '<string>'
The value to set the specified attribute to.

Example 320_setAttribute shows a button that invokes three 'setAttribute' behaviors to set the 'fill', 'stroke' and 'stroke-width' attributes of a rectangle.

<?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/setAttribute.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: setAttribute
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:setAttribute
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:setAttribute element will set the attributes of the specified target element.
	</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="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100" x="50" label="setAttribute" id="dsvgUniqueID_0">
		<dsvg:setAttribute value="#5f86B1" attribute="fill" elementID="shape1" id="dsvgUniqueID_20"/>
		<dsvg:setAttribute value="darkblue" attribute="stroke" elementID="shape1" id="dsvgUniqueID_31"/>
		<dsvg:setAttribute value="5" attribute="stroke-width" elementID="shape1" id="dsvgUniqueID_24"/>
	</dsvg:button>
	<rect height="50" width="100" y="150" x="250" id="shape1"/>
</svg>

Example 320_setAttribute (before)
Example 320_setAttribute (before) - button with associated 'setAttribute' behaviors

Example 320_setAttribute (after)
Example 320_setAttribute (after) - button with associated 'setAttribute' behaviors

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

6.12 The 'setData' element

The 'setData' element sets the data of the target element (i.e. the text between the opening and closing tags).

<!ENTITY % setDataExt "" >
<!ELEMENT dsvg:setData ANY >
<!ATTLIST dsvg:setData
  %stdBehaviorAttrs;
  elementID	ID;		#IMPLIED
  value		%Text;		#IMPLIED >

Attribute definitions:

elementID = "name"
The 'id' attribute of the element whose data is to be set.
If this attribute is not provided, no action will occur.
value = '<string>'
The value to set the target element's data to.

Example 321_setData shows a button that invokes a 'setData' behavior to set the data of a 'text' element.

<?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/setData.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: setData
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:setData
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:setData element will set a text node with the specified data.
	</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="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100" x="50" label="setData" id="dsvgUniqueID_0">
		<dsvg:setData value="This is a sample of setData." elementID="label1" id="dsvgUniqueID_1"/>
	</dsvg:button>
	<text y="115" x="200" id="label1">Label
	</text>
</svg>

Example 321_setData (before)
Example 321_setData (before) - button with associated 'setData' behaviors

Example 321_setData (after)
Example 321_setData (after) - button with associated 'setData' behaviors

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

6.13 The 'setStyle' element

The 'setStyle' element sets the value of the target element's specified style property (i.e. the property within the 'style' attribute) without removing any other existing properties.

<!ENTITY % setStyleExt "" >
<!ELEMENT dsvg:setStyle ANY >
<!ATTLIST dsvg:setStyle
  %stdBehaviorAttrs;
  elementID	ID;		#IMPLIED
  property	%Text;		#IMPLIED
  value		%Text;		#IMPLIED >

Attribute definitions:

elementID = "name"
The 'id' attribute of the element whose attribute is to be set.
If this attribute is not provided, no action will occur.
property = '<string>'
The name of the style property to be set (e.g. 'fill', 'opacity', etc.).
value = '<string>'
The value to set the specified style property to.

Example 322_setStyle shows a button that invokes three 'setStyle' behaviors to set the 'fill', 'stroke' and 'stroke-width' properties of a rectangle's 'style' attribute.

<?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/setStyle.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: setStyle
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:setStyle
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:setStyle element will set the style of a specified target element.
	</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="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100" x="50" label="setStyle" id="dsvgUniqueID_0">
		<dsvg:setStyle value="#5f86B1" property="fill" elementID="shape1" id="dsvgUniqueID_1"/>
		<dsvg:setStyle value="darkblue" property="stroke" elementID="shape1" id="dsvgUniqueID_2"/>
		<dsvg:setStyle value="5" property="stroke-width" elementID="shape1" id="dsvgUniqueID_3"/>
	</dsvg:button>
	<rect height="50" width="100" y="150" x="250" id="shape1"/>
</svg>

Example 322_setStyle (before)
Example 322_setStyle (before) - button with associated 'setStyle' behaviors

Example 322_setStyle (after)
Example 322_setStyle (after) - button with associated 'setStyle' behaviors

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

6.14 The 'setTransform' element

The 'setTransform' element sets the transformation of the target element, either relative to its current transformation or replacing its current transformation.

<!ENTITY % setTransformExt "" >
<!ELEMENT dsvg:setTransform ANY >
<!ATTLIST dsvg:setTransform
  %stdBehaviorAttrs;
  elementID	ID;		#IMPLIED
  referenceID	ID;		#IMPLIED
  absolute	%Boolean;		"false"
  hAlign	%Integer;		#IMPLIED
  vAlign	%Integer;		#IMPLIED
  matrix	%Text;		#IMPLIED
  scale		%Number;		#IMPLIED
  scaleX	%Number;		#IMPLIED
  scaleY	%Number;		#IMPLIED
  translateX	%Number;		#IMPLIED
  translateY	%Number;		#IMPLIED
  rotate	%Number;		#IMPLIED
  cx		%Integer;		#IMPLIED
  cy		%Integer;		#IMPLIED
  skewX		%Number;		#IMPLIED
  skewY		%Number;		#IMPLIED >

Attribute definitions:

elementID = "name"
The 'id' attribute of the target element whose 'transform' attribute is to be set.
If this attribute is not provided, no action will occur.
referenceID = "name"
The 'id' attribute of the element that the 'hAlign' and 'vAlign' attributes are with respect to.
If this attribute is not provided, the 'hAlign' and 'vAlign' are with respect to the target element.
absolute = "(true | false)"
Specifies whether the transformation should be applied to the element's current transformation (false) or should replace the element's current transformation (true).
If this attribute is not provided, its default is "false".
hAlign = "(left | middle | right | none | integer)"
Specifies that a translation should be automatically calculated and applied to the target element so that after the transformation, anything at the coordinates occupied by the target element's left edge, middle, or right edge will have its pre-transformed position preserved. If 'referenceID' is supplied, then the element with that ID will have its position preserved, as specified by the 'hAlign' attribute, rather than the target element. If hAlign equals an integer, that integer represents the pre-transformed x-coordinate of the position that you wish to be preserved after the transformation.
If this attribute is not provided, its default is "none".
vAlign = "(top | middle | bottom | none | integer)"
Specifies that a translation should be automatically calculated and applied to the target element so that after the transformation, anything at the coordinates occupied by the target element's top edge, middle, or bottom edge will have its pre-transformed position preserved. If 'referenceID' is supplied, then the element with that ID will have its position preserved, as specified by the 'vAlign' attribute, rather than the target element. If vAlign equals an integer, that integer represents the pre-transformed y-coordinate of the position that you wish to be preserved after the transformation.
If this attribute is not provided, its default is "none".
matrix = '<string>'
The matrix transformation to be applied to the target element. The matrix is of the form “a b c d e f”, where a, b, c, d, e and f are coefficients of the 3x3 transformation matrix (see http://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace).
scale = "<number>"
The scale factor to be applied to the target element along both the x and y axes.
scaleX = "<number>"
The scale factor to be applied to the target element along the x-axis.
scaleY = "<number>"
The scale factor to be applied to the target element along the y-axis.
translateX = "<number>"
The translation to be applied to the target element along the x-axis.
translateY = "<number>"
The translation to be applied to the target element along the y-axis.
rotate = "rotate"
The rotation, in degrees, to be applied to the target element along the y-axis.
cx = "<number>"
The x-coordinate of the point about which to rotate the element. If either 'rotate' or 'cy' is not defined, this attribute is ignored.
cy = "<number>"
The y-coordinate of the point about which to rotate the element. If either 'rotate' or 'cx' is not defined, this attribute is ignored.
skewX = "<number>"
The skew, in degrees, to be applied to the target element along the x-axis.
skewY = "<number>"
The skew, in degrees, to be applied to the target element along the y-axis.

Example 323_setTransform shows a button that invokes a 'setTransform' behaviors to rotate the rectangle by 30 degrees.

<?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/setTransform.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: setTransform
	</text>
	<text y="365" x="20" font-size="12" id="content">Content of file:   dsvg:setTransform
	</text>
	<text y="380" x="20" font-size="12" id="expected">The dsvg:setTransform element will transform the specified target element.
	</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="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100" x="50" label="setTransform" id="dsvgUniqueID_0">
		<dsvg:setTransform cy="175" cx="300" rotate="30" vAlign="middle" hAlign="middle" absolute="false" elementID="shape1" id="dsvgUniqueID_1"/>
	</dsvg:button>
	<rect height="50" width="100" y="150" x="250" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="shape1"/>
	<rect height="50" width="100" y="150" x="250" transform="rotate(30,300,175)" opacity="0.2" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="shape2"/>
</svg>

Example 323_setTransform (before)
Example 323_setTransform (before) - button with associated 'setTransform' behaviors

Example 323_setTransform (after)
Example 323_setTransform (after) - button with associated 'setTransform' behaviors

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