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.
<!ENTITY % stdBehaviorAttrs |
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:
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>
![]() |
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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:
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:
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:
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:
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>
![]() |
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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)
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:
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)
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:
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)
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:
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>
![]() |
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
![]() |
View this example as SVG (SVG-enabled browsers only)
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:
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>
![]() |
![]() |
View this example as SVG (SVG-enabled browsers only)