Some dSVG elements are difficult to classify, thus they are described in this section.
Flow control is a huge requirement for building any application. dSVG's 'if' and 'switch' elements are containers that allow behaviors to be executed only when conditional evaluative expressions are met. dSVG's 'loop' element allows behaviors to be executed iteratively (like a 'for' statement in ECMAscript) and/or upon multiple targets (like a 'for-each' statement in ECMAScript). A node list of multiple targets can be obtained from dSVG's 'findElements' element, which allows you to find all elements which match the specified search criteria.
dSVG includes other container elements too, such as 'action', 'focus' and 'share'. The 'action' element is used to group behaviors with common 'event' attribute values. It is also used to indirectly associate its child behaviors to an element, allowing them to be reused. One of the most commonly required features in a Web application is the ability to "select" visual elements in a radio fashion and have the selected element distinguish itself visually from the rest. dSVG's 'focus' element lets elements be selected via any event (e.g. onclick, onmouseover, etc) keeps track of the current and previously selected element, and allows a common group of behaviors to be executed every time the selection changes. The 'share' element can be used to group anything that needs to be reused, such as 'item' elements common to both a contextMenu and a listBox.
Another type of dSVG element could best be described as "passive" behaviors, such as the 'listener', 'mousePosition', 'mapCoords' and 'mapProj' elements. Unlike other behaviors, they are instantiated once and then remain persistent in memory. Thus they should never be placed as children of other elements (other than the 'svg' root element). The 'listener' element simply watches the observer element for a particular event and then forwards it to a handler element (typically an 'action' element). The 'mousePosition' element watches the target element for a particular event and then records the mouse position in its own attributes. The 'mapCoords' element automatically converts coordinates from one space to another whenever its coordinate attributes change. The 'mapProj' element automatically converts coordinates from one projection system (e.g. UTM or LatLong) to another whenever its coordinate attributes change.
<!ENTITY % stdBehaviorAttrs |
The 'action' element is a container used to group dSVG behaviors with common 'event' attribute values together so that the behavior elements do not actually need to specify the 'event' attribute themselves. It is also used to indirectly associate its child behaviors to an element, via the 'listener' element, allowing them to be reused.
<!ENTITY % actionExt "" > <!ELEMENT dsvg:action (%Behaviors;) > <!ATTLIST dsvg:action %stdBehaviorAttrs; > |
Example 301_action shows a push button and a circle, both with indirectly associated behaviors.
<?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/setAttribute.js"/> <script type="text/ecmascript" xlink:href="dsvg11/button.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_1">dSVG sample behavior: action and listener </text> <text y="365" x="20" font-size="12" id="content">Content of file: dsvg:action, dsvg:listener </text> <text y="380" x="20" font-size="12" id="expected">The dsvg:action element is a container for other dSVG behavior elements. </text> <text y="395" x="20" font-size="12" id="depend">Actions can be associated indirectly using a listener element, or they can be set up directly as a child of an observing element. </text> <line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/> <text y="85" x="140" font-size="12" id="text_desc1">1. Sample of an indirect 'action / listener' observed by a UI Control. </text> <text y="115" x="140" font-size="12" id="text_desc2">2. Sample of a direct 'action' set up as child of the UI Control. </text> <text y="205" x="140" font-size="12" id="text_desc3">3. Sample of an indirect 'action / listener' observed by a basic SVG element. </text> <text y="265" x="140" font-size="12" id="text_desc4">4. Sample of a direct 'action' set up as a child of a basic SVG element. </text> <text y="60" x="20" font-weight="bold" font-size="12" id="text_desc3a">Click the button(s) to execute the behaviors. </text> <text y="160" x="20" font-weight="bold" font-size="12" id="text_desc4a">Mouseover the SVG shapes to execute the behaviors. </text> <text y="70" x="627" font-weight="bold" font-size="12" id="target_text">Target circle </text> </g> <!-- adding behavior --> <g id="actions"> <dsvg:listener handler="actionGreen" observer="circle_1" event="mouseover" id="listenerGreen"/> <dsvg:listener handler="actionRed" observer="button_1" event="callback" id="listenerRed"/> <dsvg:action id="actionGreen"> <dsvg:setAttribute value="green" attribute="fill" elementID="circle_2" id="dsvgUniqueID_3"/> <dsvg:setData value="# 3" elementID="textNumber" id="dsvgUniqueID_12a"/> </dsvg:action> <dsvg:action id="actionRed"> <dsvg:setAttribute value="red" attribute="fill" elementID="circle_2" id="dsvgUniqueID_13"/> <dsvg:setData value="# 1" elementID="textNumber" id="dsvgUniqueID_12c"/> </dsvg:action> </g> <dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="70" x="20" label="Fire action" id="button_1"/> <dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100" x="20" label="Fire action" id="button_2"> <dsvg:action id="actionOrange"> <dsvg:setAttribute value="orange" attribute="fill" elementID="circle_2" id="dsvgUniqueID_13"/> <dsvg:setData value="# 2" elementID="textNumber" id="dsvgUniqueID_12b"/> </dsvg:action> </dsvg:button> <circle r="25" cy="200" cx="75" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="circle_1"/> <circle r="50" cy="132" cx="662" stroke-width="5" stroke="black" fill="none" id="circle_2"/> <rect height="50" width="50" y="240" x="50" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="rect_1"> <dsvg:action event="onmouseover" id="actionGold"> <dsvg:setAttribute value="#5f86B1" attribute="fill" elementID="circle_2" id="dsvgUniqueID_9"/> <dsvg:setData value="# 4" elementID="textNumber" id="dsvgUniqueID_12"/> </dsvg:action> </rect> <rect height="150" width="150" y="50" x="584" stroke-width="2" stroke="black" fill="none" id="base_rect"/> <text y="145" x="662" text-anchor="middle" font-size="36" fill="white" id="textNumber"># </text> </svg>
![]() |
![]() |
View this example as SVG (SVG-enabled browsers only)
The 'alias' element acts as a proxy, or representative, for some other value, such as an attribute of an element. An 'alias' element differs from a 'variable' element in that an alias has a 1:1 relationship with its reference, whereas a variable can be an equation made up of multiple references. This 1:1 relationship allows the reference's value to be changed by modifying the 'alias' element. An 'alias' element functions as a 'variable' element when posting with the 'postURL' element, except that 'alias' uses the value of its reference. If a server's response to the 'postURL' behavior contains 'alias' elements, their 'initialValue' attributes will be applied to their references. Thus an 'alias' element is used to bring data back into the document, e.g. for session management.
<!ENTITY % aliasExt "" > <!ELEMENT dsvg:alias EMPTY > <!ATTLIST dsvg:alias id name #IMPLIED name %Text; #IMPLIED initialValue %Text; #IMPLIED reference %Text; #IMPLIED saveState %Text; #IMPLIED collection %Text; #IMPLIED > |
Attribute definitions:
The 'constraint' element defines the rules for constraining anything about a target element, such as its attributes, style properties, bounding box and dimensions due to transformations, zoom and pan. The appropriate mutation event listeners are automatically set based on the attributes so that the 'event' attribute is not required.
<!ENTITY % constraintExt "" > <!ELEMENT dsvg:constraint EMPTY > <!ATTLIST dsvg:constraint %stdBehaviorAttrs; elementID ID #IMPLIED ancestorID ID #IMPLIED numAncestors %Integer; #IMPLIED attributeName %Text; #IMPLIED propertyName %Text; #IMPLIED value %Text; #IMPLIED scaleImmunity %Boolean; "false" scaleXImmunity %Boolean; "false" scaleYImmunity %Boolean; "false" preserveAspectRatio %PreserveAspectRatio; "false" hAlign %HAlign; "none" vAlign %VAlign; "none" width %Length; #IMPLIED height %Length; #IMPLIED left %Coordinate; #IMPLIED right %Coordinate; #IMPLIED top %Coordinate; #IMPLIED bottom %Coordinate; #IMPLIED > |
Attribute definitions:
The 'focus' element defines a group of elements. Whenever an element, whose 'focusGroup' attribute is equal to the 'id' attribute of a 'focus' element, is clicked, the 'focus' element's child action elements will be executed, its 'elementID' attribute will be updated to reflect the ID of the element with focus, and its 'elementName' attribute will be updated to reflect the type of element with focus (e.g. 'rect', 'circle', etc.). As well, the 'previousID' and 'previousName' attributes are also stored for reference, so that the behaviors can be "undone" for the previously selected element.
<!ENTITY % focusExt "" > <!ELEMENT dsvg:focus (%Behaviors;) > <!ATTLIST dsvg:focus %stdBehaviorAttrs; elementID ID #IMPLIED elementName %Text #IMPLIED previousID ID #IMPLIED previousName %Text #IMPLIED > |
Attribute definitions:
Example 307_focus shows circle and text elements in different focus groups, each setting the other.
<?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/focus.js"/> <script type="text/ecmascript" xlink:href="dsvg11/setAttribute.js"/> <script type="text/ecmascript" xlink:href="dsvg11/setStyle.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: focus - with added attributes focusGroup and focus </text> <text y="365" x="20" font-size="12" id="content">Content of file: dsvg:focus, dsvg:setTransform, dsvg:setAttribute, dsvg:setStyle, (added attributes dsvg:focus, dsvg:focusGroup) </text> <text y="380" x="20" font-size="12" id="expected">The dsvg:focusGroup attribute adds the ability to store the ID of similar type elements that are assigned to that group. </text> <text y="395" x="20" font-size="12" id="depend">Default focus can be given to an element (red circle above) by adding the dsvg:focus attribute to that element. </text> <line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/> <!-- adding behavior --> <text y="250" x="20" font-size="12" id="desc">The red, blue, green circles are part of the focusGroup. The orange circle is not. </text> <text y="150" x="200" font-size="12" id="desc_2">Click on the red, green and blue circles to set focus. </text> <text y="170" x="200" font-size="12" id="desc_3">Hover over the 'red', 'green' and 'blue' text elements to set focus. </text> <dsvg:focus elementID="redCircle" event="onclick" id="circleGroup"> <dsvg:setTransform scale="1.2" vAlign="middle" hAlign="middle" absolute="true" elementID="%circleGroup@elementID%"/> <dsvg:setTransform scale="1" vAlign="middle" hAlign="middle" absolute="true" elementID="%circleGroup@previousID%"/> <dsvg:setAttribute value="%(circleGroup@elementID)@fill%Text" attribute="elementID" elementID="textGroup"/> </dsvg:focus> <dsvg:focus event="onmouseover" id="textGroup"> <dsvg:setStyle value="%(textGroup@elementID)@cdata%" property="fill" elementID="%textGroup@elementID%"/> <dsvg:setStyle value="black" property="fill" elementID="%textGroup@previousID%"/> <dsvg:setAttribute value="%(textGroup@elementID)@cdata%Circle" attribute="elementID" elementID="circleGroup"/> </dsvg:focus> <circle dsvg:focus="true" dsvg:focusGroup="circleGroup" r="30" cy="100" cx="50" fill="red" id="redCircle"/> <circle dsvg:focusGroup="circleGroup" r="30" cy="200" cx="50" fill="blue" id="blueCircle"/> <circle dsvg:focusGroup="circleGroup" r="30" cy="100" cx="150" fill="green" id="greenCircle"/> <circle r="30" cy="200" cx="150" fill="orange" id="orangeCircle"/> <text dsvg:focus="true" dsvg:focusGroup="textGroup" y="80" x="200" id="redText">red</text> <text dsvg:focusGroup="textGroup" y="80" x="250" id="blueText">blue</text> <text dsvg:focusGroup="textGroup" y="80" x="300" id="greenText">green</text> <text y="80" x="350">orange</text> </svg>
![]() |
![]() |
View this example as SVG (SVG-enabled browsers only)
The 'if' element defines a simple conditional statement which, if evaluated to true, results in its child behavior elements being executed. Commonly used in conjunction with dSVG expressions for referencing the real-time value of element attributes.
<!ENTITY % ifExt "" > <!ELEMENT dsvg:if (%Behaviors;) > <!ATTLIST dsvg:if %stdBehaviorAttrs; value1 %Text; #IMPLIED op %Operator; #IMPLIED value2 %Text; #IMPLIED > |
Attribute definitions:
Example 303_if shows a push button with associated 'if' 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/button.js"/> <script type="text/ecmascript" xlink:href="dsvg11/if.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: condition - if </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:checkBox, dsvg:Button, dsvg:if, dsvg:setData </text> <text y="380" x="20" font-size="12" id="expected">The dsvg:if element executes or renders child elements based on a conditional if statement. (true/false) </text> <!-- adding behavior --> <dsvg:checkBox xlink:href="dsvg11/skinCheckBox_Default.svg#skinCheckBox" autoScale="true" disabled="false" selected="false" height="12" width="12" y="70" x="50" label="CheckBox" id="checkBox1"/> <dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100.5" x="50.5" label="Check State" id="dsvgUniqueID_1"> <dsvg:if value2="true" op="equal" value1="%checkBox1@selected%" id="dsvgUniqueID_2"> <dsvg:setData value="Check box selected state is true." elementID="label1" id="dsvgUniqueID_3"/> </dsvg:if> <dsvg:if value2="true" op="notEqual" value1="%checkBox1@selected%" id="dsvgUniqueID_4"> <dsvg:setData value="Check box selected state is false." elementID="label1" id="dsvgUniqueID_5"/> </dsvg:if> </dsvg:button> <text y="150" x="50" fill="#5f86B1" id="label1">Label </text> </svg>
![]() |
View this example as SVG (SVG-enabled browsers only)
The 'listener' element listens for the specified event on the observer element and, if found, dispatches the event to the handler behavior element (typically an 'action' element) for processing. This is useful because the behaviors are not directly associated to the observer element, thus allowing them to be reused.
<!ENTITY % listenerExt "" > <!ELEMENT dsvg:listener (%Behaviors;) > <!ATTLIST dsvg:listener %stdBehaviorAttrs; observer ID #IMPLIED handler ID #IMPLIED > |
Example 309_listener shows a push button and a circle, both with indirectly associated behaviors.
<?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/setAttribute.js"/> <script type="text/ecmascript" xlink:href="dsvg11/button.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_1">dSVG sample behavior: action and listener </text> <text y="365" x="20" font-size="12" id="content">Content of file: dsvg:action, dsvg:listener </text> <text y="380" x="20" font-size="12" id="expected">The dsvg:action element is a container for other dSVG behavior elements. </text> <text y="395" x="20" font-size="12" id="depend">Actions can be associated indirectly using a listener element, or they can be set up directly as a child of an observing element. </text> <line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/> <text y="85" x="140" font-size="12" id="text_desc1">1. Sample of an indirect 'action / listener' observed by a UI Control. </text> <text y="115" x="140" font-size="12" id="text_desc2">2. Sample of a direct 'action' set up as child of the UI Control. </text> <text y="205" x="140" font-size="12" id="text_desc3">3. Sample of an indirect 'action / listener' observed by a basic SVG element. </text> <text y="265" x="140" font-size="12" id="text_desc4">4. Sample of a direct 'action' set up as a child of a basic SVG element. </text> <text y="60" x="20" font-weight="bold" font-size="12" id="text_desc3a">Click the button(s) to execute the behaviors. </text> <text y="160" x="20" font-weight="bold" font-size="12" id="text_desc4a">Mouseover the SVG shapes to execute the behaviors. </text> <text y="70" x="627" font-weight="bold" font-size="12" id="target_text">Target circle </text> </g> <!-- adding behavior --> <g id="actions"> <dsvg:listener handler="actionGreen" observer="circle_1" event="mouseover" id="listenerGreen"/> <dsvg:listener handler="actionRed" observer="button_1" event="callback" id="listenerRed"/> <dsvg:action id="actionGreen"> <dsvg:setAttribute value="green" attribute="fill" elementID="circle_2" id="dsvgUniqueID_3"/> <dsvg:setData value="# 3" elementID="textNumber" id="dsvgUniqueID_12a"/> </dsvg:action> <dsvg:action id="actionRed"> <dsvg:setAttribute value="red" attribute="fill" elementID="circle_2" id="dsvgUniqueID_13"/> <dsvg:setData value="# 1" elementID="textNumber" id="dsvgUniqueID_12c"/> </dsvg:action> </g> <dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="70" x="20" label="Fire action" id="button_1"/> <dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="100" x="20" label="Fire action" id="button_2"> <dsvg:action id="actionOrange"> <dsvg:setAttribute value="orange" attribute="fill" elementID="circle_2" id="dsvgUniqueID_13"/> <dsvg:setData value="# 2" elementID="textNumber" id="dsvgUniqueID_12b"/> </dsvg:action> </dsvg:button> <circle r="25" cy="200" cx="75" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="circle_1"/> <circle r="50" cy="132" cx="662" stroke-width="5" stroke="black" fill="none" id="circle_2"/> <rect height="50" width="50" y="240" x="50" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="rect_1"> <dsvg:action event="onmouseover" id="actionGold"> <dsvg:setAttribute value="#5f86B1" attribute="fill" elementID="circle_2" id="dsvgUniqueID_9"/> <dsvg:setData value="# 4" elementID="textNumber" id="dsvgUniqueID_12"/> </dsvg:action> </rect> <rect height="150" width="150" y="50" x="584" stroke-width="2" stroke="black" fill="none" id="base_rect"/> <text y="145" x="662" text-anchor="middle" font-size="36" fill="white" id="textNumber"># </text> </svg>
![]() |
![]() |
View this example as SVG (SVG-enabled browsers only)
The 'loop' element allows its child behaviors to be executed iteratively (like a 'for' statement in ECMAscript) and/or upon multiple targets (like a 'for-each' statement in ECMAScript). A node list of multiple targets can be obtained from the 'findElements' element, which allows you to find all elements which match the specified search criteria. Optionally, the actual matching elements can be copied to a documentFragment, which can be used by the 'postURL' element.
<!ENTITY % loopExt "" > <!ELEMENT dsvg:loop ANY > <!ATTLIST dsvg:loop %stdBehaviorAttrs; elementIDs %Text; #IMPLIED nodeList %Text; #IMPLIED elementID ID; #IMPLIED from %Integer; #IMPLIED to %Integer; #IMPLIED increment %Integer; #IMPLIED value %Integer; #IMPLIED > |
Attribute definitions:
Example 312_loop shows a push button that invokes the 'loop' 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/loop.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/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: loop </text> <text y="365" x="20" font-size="12" id="content">Content of file: dsvg:loop, dsvg:button, dsvg:setData, dsvg:setAttribute </text> <text y="380" x="20" font-size="12" id="expected">The dsvg:loop element is a sequence of instructions that is continually repeated until a certain condition is reached. </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 --> <g id="sizer"> <rect height="8" width="8" y="100" x="25" fill="gray" id="sizer1"/> <rect height="8" width="8" y="100" x="35" fill="gray" id="sizer2"/> <rect height="8" width="8" y="100" x="45" fill="gray" id="sizer3"/> <rect height="8" width="8" y="100" x="55" fill="gray" id="sizer4"/> <rect height="8" width="8" y="100" x="65" fill="gray" id="sizer5"/> <rect height="8" width="8" y="100" x="75" fill="gray" id="sizer6"/> <rect height="8" width="8" y="100" x="85" fill="gray" id="sizer7"/> <rect height="8" width="8" y="100" x="95" fill="gray" id="sizer8"/> <rect height="8" width="8" y="100" x="105" fill="gray" id="sizer9"/> <rect height="8" width="8" y="100" x="115" fill="gray" id="sizer10"/> <rect height="8" width="8" y="100" x="125" fill="gray" id="sizer11"/> <rect height="8" width="8" y="100" x="135" fill="gray" id="sizer12"/> <rect height="8" width="8" y="100" x="145" fill="gray" id="sizer13"/> <rect height="8" width="8" y="100" x="155" fill="gray" id="sizer14"/> <rect height="8" width="8" y="100" x="165" fill="gray" id="sizer15"/> <rect height="8" width="8" y="100" x="175" fill="gray" id="sizer16"/> <rect height="8" width="8" y="100" x="185" fill="gray" id="sizer17"/> <rect height="8" width="8" y="100" x="195" fill="gray" id="sizer18"/> </g> <dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="70" x="220" label="Loop Count" id="loop1"> <dsvg:loop increment="1" to="18" from="1" id="LOOP1"> <dsvg:setAttribute value="%LOOP1@value * 10%" attribute="height" elementID="sizer%LOOP1@value%"/> </dsvg:loop> <dsvg:setData value="%LOOP1@value%" elementID="iteration" id="data"/> </dsvg:button> <text y="70" x="25" fill="#5f86B1" color="" id="desc"># of times through the loop: </text> <text y="70" x="180" font-weight="bold" font-size="14" fill="darkblue" id="iteration">0 </text> </svg>
![]() |
View this example as SVG (SVG-enabled browsers only)
The 'mapCoords' element defines an object used for mapping coordinates in one space to another space, via a polynomial transformation, whose coefficients are determined by the coordinates of the point-pairs given in the child 'pointPair' elements.
<!ENTITY % mapCoordsExt "" > <!ELEMENT dsvg:mapCoords (dsvg:pointPair)* > <!ATTLIST dsvg:mapCoords %stdBehaviorAttrs; order %Integer; #IMPLIED inputID ID #IMPLIED x %Coordinate; #IMPLIED y %Coordinate; #IMPLIED u %Coordinate; #IMPLIED v %Coordinate; #IMPLIED apply %Boolean "false" > |
Attribute definitions:
Example 313_mapCoords shows two ellipses transformed to another coordinate space.
<?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/mapCoords.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: mapCoords </text> <text y="365" x="20" font-size="12" id="content">Content of file: dsvg:mapCoords, dsvg:pointPair, dsvg:setAttribute </text> <text y="380" x="20" font-size="12" id="expected">The dsvg:mapCoords element defines an object used for mapping from one coordinate space to another. </text> <text y="395" x="20" font-size="12" id="depend">The resulting coefficients are determined by the coordinates of the point-pairs (child) elements. </text> <line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/> <!-- adding behavior --> <g id="fragment"> <ellipse ry="50" rx="100" cy="115" cx="175" fill="orange" id="fragellipse1"/> <ellipse ry="25" rx="50" cy="115" cx="175" fill="blue" id="fragellipse2"/> </g> <rect height="100" width="200" y="65" x="75" stroke-width="1" stroke="red" fill="none"/> <text y="185" x="75" font-size="10" fill="red">Incorrect Location </text> <rect height="100" width="200" y="165" x="175" stroke-width="1" stroke="green" fill="none"/> <text y="285" x="175" font-size="10" fill="green">correct Location </text> <dsvg:mapCoords apply="true" inputID="fragment" id="mapcoords1"> <dsvg:pointPair v="100" u="100" y="0" x="0"/> <dsvg:pointPair v="110" u="110" y="10" x="10"/> </dsvg:mapCoords> <dsvg:setAttribute value="true" attribute="convertNow" elementID="mapcoords1" id="dsvgUniqueID_3"/> </svg>
![]() |
View this example as SVG (SVG-enabled browsers only)
The 'pointPair' element, which must be a child of the 'mapCoords' element, defines the x-y coordinates for the same location in two different coordinate spaces. The point-pairs are used to calculate the polynomial transformation coefficients.
<!ENTITY % pointPairExt "" > <!ELEMENT dsvg:pointPair EMPTY > <!ATTLIST dsvg:pointPair %stdBehaviorAttrs; x %Coordinate; #IMPLIED y %Coordinate; #IMPLIED u %Coordinate; #IMPLIED v %Coordinate; #IMPLIED > |
Attribute definitions:
The 'mapProj' element defines an object used for mapping coordinates in one space to another space, via a polynomial transformation, whose coefficients are determined by the coordinates of the point-pairs given in the child 'pointPair' elements.
<!ENTITY % mapProjExt "" > <!ELEMENT dsvg:mapProj EMPTY > <!ATTLIST dsvg:mapProj %stdBehaviorAttrs; inputID ID #IMPLIED inputProj %Projection "UTM" outputProj %Projection "LatLong" ellipsoid %Ellipsoid "WGS84" zone %Text #IMPLIED x %Coordinate; #IMPLIED y %Coordinate; #IMPLIED u %Coordinate; #IMPLIED v %Coordinate; #IMPLIED > |
Attribute definitions:
Example 314_mapProj shows two ellipses transformed to another coordinate space.
<?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/mousePosition.js"/> <script type="text/ecmascript" xlink:href="dsvg11/mapCoords.js"/> <script type="text/ecmascript" xlink:href="dsvg11/setData.js"/> <script type="text/ecmascript" xlink:href="dsvg11/mapProj.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: mapProj </text> <text y="365" x="20" font-size="12" id="content">Content of file: dsvg:mapProj, dsvg:mapCoords, dsvg:pointPair, dsvg:setData, dsvg:mousePosition </text> <text y="380" x="20" font-size="12" id="expected">The dsvg:mapProj element defines an object used for mapping coordinates from one project system to another. </text> <text y="395" x="20" font-size="12" id="depend">For example, "latlong" can be mapped to "UTM". </text> <line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/> <!-- adding behavior --> <text y="65" x="10" font-weight="bold" id="targetText">Target Image </text> <image height="371" width="325" y="0" x="50" transform=" translate(50 50) scale(0.75)" xlink:href="314_canutillo.jpg" id="canutillo"> <dsvg:setData value="%mousePosition@x%, %mousePosition@y%" elementID="textMousePosition" event="onmousemove"/> <dsvg:setData value="%pixelsToUTM@u%, %pixelsToUTM@v%" elementID="textUTM" event="onmousemove"/> <dsvg:setData value="%UTMToLatLong@latitude% %UTMToLatLong@longitude%" elementID="textLL" event="onmousemove"/> </image> <dsvg:mousePosition type="relative" elementID="canutillo" event="onmousemove" id="mousePosition"/> <dsvg:mapCoords inputID="mousePosition" id="pixelsToUTM"> <dsvg:pointPair v="3534270" u="346020" y="0" x="0"/> <dsvg:pointPair v="3541920" u="352710" y="371" x="325"/> </dsvg:mapCoords> <dsvg:mapProj zone="13" ellipsoid="WGS84" outputProj="LatLong" inputProj="UTM" inputID="pixelsToUTM" id="UTMToLatLong"/> <text y="285" x="360" style="font-weight:normal;font-size:11;font-family:Tahoma;fill:#000000">x,y: </text> <text y="305" x="360" style="font-weight:normal;font-size:11;font-family:Tahoma;fill:#000000">UTM: </text> <text y="325" x="360" style="font-weight:normal;font-size:11;font-family:Tahoma;fill:#000000">Lat/Long: </text> <text y="285" x="420" style="font-weight:normal;font-size:11;font-family:Tahoma;fill:#000000;" id="textMousePosition"> </text> <text y="305" x="420" style="font-weight:normal;font-size:11;font-family:Tahoma;fill:#000000;" id="textUTM"> </text> <text y="325" x="420" style="font-weight:normal;font-size:11;font-family:Tahoma;fill:#000000;" id="textLL"> </text> </svg>
![]() |
View this example as SVG (SVG-enabled browsers only)
The 'mousePosition' element defines a container for holding the current mouse coordinates, relative to the document or to the target element. It is a persistent object in memory that should be instantiated once, and so should not be a child of any element other than the 'svg' root element (or a 'g' element).
<!ENTITY % mousePositionExt "" > <!ELEMENT dsvg:mousePosition EMPTY > <!ATTLIST dsvg:mousePosition %stdBehaviorAttrs; elementID ID #IMPLIED x %Coordinate; #IMPLIED y %Coordinate; #IMPLIED type %Type "relative" > |
Attribute definitions:
Example 315_mousePosition shows a rectangle with mouse coordinates displayed relative to both the document and the 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/mousePosition.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: mousePosition </text> <text y="365" x="20" font-size="12" id="content">Content of file: dsvg:mousePosition, dsvg:setData </text> <text y="380" x="20" font-size="12" id="expected">The dsvg:mousePosition element defines a container for holding the current mouse coordinates. </text> <text y="395" x="20" font-size="12" id="depend">The coordinates can be tracked relative to the document or absolute to the parent element. </text> <line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/> <!-- adding behavior --> <text y="60" x="50" id="targetText">Target Rectangle </text> <rect height="200" width="200" y="70" x="50" stroke-width="3" stroke="black" fill="#5f86B1" id="rect1"> <dsvg:setData value="%mouse_Relative@x%" elementID="relative_xpos" event="onmousemove" id="set_relativeX"/> <dsvg:setData value="%mouse_Relative@y%" elementID="relative_ypos" event="onmousemove" id="set_relativeY"/> <dsvg:setData value="%mouse_Absolute@x%" elementID="absolute_xpos" event="onmousemove" id="set_absoluteX"/> <dsvg:setData value="%mouse_Absolute@y%" elementID="absolute_ypos" event="onmousemove" id="dsvgUniqueID_5"/> </rect> <dsvg:mousePosition type="relative" elementID="rect1" event="onmousemove" id="mouse_Relative"/> <dsvg:mousePosition type="absolute" elementID="rect1" event="onmousemove" id="mouse_Absolute"/> <text y="290" x="40" id="textx_relative">Relative Position </text> <text y="310" x="40" id="relative_xlabel">X= </text> <text y="330" x="40" id="relative_ylabel">Y= </text> <text y="310" x="60" font-size="8" fill="green" id="relative_xpos">x Position </text> <text y="330" x="60" font-size="8" fill="green" id="relative_ypos">y Position </text> <text y="290" x="190" id="textx_absolute">Absolute Position </text> <text y="310" x="190" id="absolute_xlabel">X= </text> <text y="330" x="190" id="absolute_ylabel">Y= </text> <text y="310" x="210" font-size="8" fill="green" id="absolute_xpos">x Position </text> <text y="330" x="210" font-size="8" fill="green" id="absolute_ypos">y Position </text> </svg>
![]() |
View this example as SVG (SVG-enabled browsers only)
The 'share' element is a container used to group any dSVG elements that are intended to be shared children of multiple SVG elements or dSVG UI controls. If an element has the dSVG attribute 'share', equal to the 'id' attribute of a dSVG 'share' element, then the children of that 'share' element are treated as children of the element with the 'share' attribute. Note that the children of the 'share' element are not copied--they exist only in one location and are shared, like "virtual" children.
<!ENTITY % shareExt "" > <!ELEMENT dsvg:share (%UIControls;|%Behaviors;|dsvg:item)* > <!ATTLIST dsvg:share %stdBehaviorAttrs; > |
Example 011_share shows a listBox and a comboBox, both sharing the same 'item' elements as their children.
<?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="450px" width="744px" onload="init(evt)" viewBox="0 0 744 450"> <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/listbox.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/scrollbar.js"/> <script type="text/ecmascript" xlink:href="dsvg11/slider.js"/> <script type="text/ecmascript" xlink:href="dsvg11/combobox.js"/> <script type="text/ecmascript" xlink:href="dsvg11/textbox.js"/> <!-- Adding Template --> <g id="template"> <rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="rect_Title"/> <text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="TITLE">dSVG sample: Share element </text> <line y2="350" x2="744" y1="350" opacity="1.0" stroke-width="2" stroke="#5F86B1" fill="#5F86B1" id="bottomLine"/> <text y="370" x="20" font-size="12" id="defaut_ex">The share element is used to share a group of items with multiple elements. </text> <text y="395" x="20" font-size="12" id="small_ex">This document shares the same set of items with the combo box and the list box. </text> <text y="420" x="20" font-size="12" id="large_ex">Associate a share element with other elements by adding a dsvg:share attribute to the element that references the share element. </text> </g> <!-- adding controls --> <dsvg:share id="share_1"> <dsvg:item value="STOP" data="red" id="item_1"> <dsvg:itemData value="Octagon" name="shape"/> </dsvg:item> <dsvg:item value="YIELD" data="yellow" id="item_2"> <dsvg:itemData value="Triangle" name="shape"/> </dsvg:item> <dsvg:item value="GO" data="green" id="item_3"> <dsvg:itemData value="Circle" name="shape"/> </dsvg:item> </dsvg:share> <dsvg:listBox dsvg:share="share_1" xlink:href="dsvg11/skinListBox_Composite.svg#skinListBox" autoScale="true" height="60" width="198" y="70" x="50" label="List box: (default attributes with the added attribute dsvg:share)" id="listbox_1"/> <dsvg:comboBox dsvg:share="share_1" xlink:href="dsvg11/skinComboBox_Composite.svg#skinComboBox" autoScale="true" height="17" width="217" y="220" x="50" label="Combo box: (default attributes with the added attribute dsvg:share)" id="combobox_1"/> </svg>
![]() |
View this example as SVG (SVG-enabled browsers only)
The 'switch' element defines a conditional statement, comparing one value to other values defined in child 'case' elements. Commonly used in conjunction with dSVG expressions for referencing the real-time value of variables or element attributes.
<!ENTITY % switchExt "" > <!ELEMENT dsvg:switch (%Behaviors;) > <!ATTLIST dsvg:switch %stdBehaviorAttrs; variable %Text; #IMPLIED > |
Attribute definitions:
Example 304_switch shows a comboBox with an associated 'switch' behavior, resulting in one of four 'setData' behaviors being run.
<?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/spinBox.js"/> <script type="text/ecmascript" xlink:href="dsvg11/textbox.js"/> <script type="text/ecmascript" xlink:href="dsvg11/button.js"/> <script type="text/ecmascript" xlink:href="dsvg11/switch.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: condition - switch </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:spinBox, dsvg:switch, dsvg:case, dsvg:default </text> <text y="380" x="20" font-size="12" id="expected">The dsvg:switch element compares conditions of the child dsvg:case element(s) along with the dsvg:default element values. </text> <!-- adding behavior --> <text y="150" x="50" fill="#5f86B1" id="label">Label </text> <dsvg:spinBox selected="false" xlink:href="dsvg11/skinSpinBox_Composite.svg#skinSpinBox" autoScale="true" disabled="false" increment="1" value="1" max="5" min="0" height="18" width="118" y="70" x="50" label="Spin box" id="spin"> <dsvg:switch variable="%spin@value%" id="dsvgUniqueID_4"> <dsvg:case value="1" id="dsvgUniqueID_5"> <dsvg:setData value="Value is 1, minimum" elementID="label" id="dsvgUniqueID_7"/> </dsvg:case> <dsvg:case value="2" id="dsvgUniqueID_6"> <dsvg:setData value="Value is two" elementID="label" id="dsvgUniqueID_8"/> </dsvg:case> <dsvg:case value="3" id="dsvgUniqueID_7"> <dsvg:setData value="Value is THREE!" elementID="label" id="dsvgUniqueID_9"/> </dsvg:case> <dsvg:default id="dsvgUniqueID_8"> <dsvg:setData value="value is other than one two three" elementID="label" id="dsvgUniqueID_10"/> </dsvg:default> </dsvg:switch> </dsvg:spinBox> <text y="70" x="200" id="text_a">Switch: CASE for values 1,2,3 </text> <text y="90" x="200" id="text_b">Switch: DEFAULT for other values </text> <text y="110" x="200" id="text_c">In all cases, the value will be reflected in the Label. </text> </svg>
![]() |
View this example as SVG (SVG-enabled browsers only)
The 'case' element is a child of the 'switch' element, which defines the value to compare to the 'switch' element's 'value' attribute. If it evaluates to true, its child elements are executed. Commonly used in conjunction with dSVG expressions for referencing the real-time value of variables or element attributes.
<!ENTITY % caseExt "" > <!ELEMENT dsvg:case (%Behaviors;) > <!ATTLIST dsvg:case %stdBehaviorAttrs; value %Text; #IMPLIED > |
Attribute definitions:
The 'default' element is a child of the 'switch' element, whose child behaviors are executed whenever none of the 'switch' element's 'case' elements evaluate to true. Commonly used in conjunction with dSVG expressions for referencing the real-time value of variables or element attributes.
<!ENTITY % defaultExt "" > <!ELEMENT dsvg:default (%Behaviors;) > <!ATTLIST dsvg:default %stdBehaviorAttrs; > |
The 'variable' element acts as a proxy or representative for some other value, such as an attribute of an element. A 'variable' element can have a 1:1 relationship with an attribute or be an equation made up of multiple attributes and constants. Variables are intended as a convenient way of storing data as well as building complex expressions that can be used anywhere via dSVG expressions. Note that it is the author's responsibility to not create self referential variables or circular variable references.
<!ENTITY % variableExt "" > <!ELEMENT dsvg:variable EMPTY > <!ATTLIST dsvg:variable id ID #IMPLIED name %Text; #IMPLIED value %Text; #IMPLIED saveState %Text; #IMPLIED collection %Text; #IMPLIED > |
Attribute definitions:
Example 328_variable shows a variable set to be the sum of the width of two rectangles.
<?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="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/button.js"/> <script type="text/ecmascript" xlink:href="dsvg11/setAttribute.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: variable </text> <text y="365" x="20" font-size="12" id="content">Content of file: dsvg:variable </text> <text y="380" x="20" font-size="12" id="expected">The dsvg:variable element is able to assume different values. </text> <text y="395" x="20" font-size="12" id="depend">Selecting the button will set a new value for the 'variable' ($varRect). </text> <line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/><!-- adding behavior --> <dsvg:variable value="%redRect@width + blueRect@width%" name="varRect" id="variableRect"/> <rect height="50" width="50" y="100" x="50" stroke="darkred" stroke-width="5" fill="red" id="redRect"/> <rect height="50" width="50" y="180" x="50" stroke="darkblue" stroke-width="5" fill="#5f86B1" id="blueRect"/> <text y="95" x="50" id="textRedRect">width = 50 </text> <text y="175" x="50" id="textBlueRect">width = 50 </text> <text y="175" x="150" id="textDesc3">Note: Once the button is selected, setAttribute is applied to the blue rect so width="previous '$varRect' value" </text> <dsvg:button xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" height="18" width="100" y="295" x="50" label="New Variable" id="dsvgUniqueID_1"> <dsvg:setAttribute value="%$varRect%" attribute="width" elementID="blueRect" id="setAttRect"/> <dsvg:setData value="width = %blueRect@width%" elementID="textBlueRect" id="setTextBlueRect"/> <dsvg:setData value="$varRect = %$varRect%" elementID="text1" id="setTextVar"/> </dsvg:button> <text y="259" x="50" id="textDesc">$varRect = redRect@width + blueRect@width </text> <text y="310" x="170" id="text1">$varRect = 100 </text> </svg>
![]() |
![]() |
View this example as SVG (SVG-enabled browsers only)