dSVG attributes can be part of any dSVG UI control as well as some SVG elements, namely the shape elements and the 'g' container element.
Some dSVG attributes endow the element with passive behaviors, i.e. a capability that does not manifest itself except in response to an event. The 'drag' attribute, for instance, allows the element's position to change by clicking and dragging it with the mouse. The 'zoomAndPan' attribute causes transformations to be applied to the element in response to 'scroll' and 'zoom' events, so that the element appears to be immune to zooming and panning.
Some dSVG attributes work only in conjunction with specific dSVG elements. The 'contextMenu' attribute, for instance, refers to a 'contextMenu' element, causing it to display when the user right-clicks on the element.
Some dSVG attributes work only in conjunction with other dSVG attributes. The 'tipDelay', 'tipTrack' and 'title' attributes only have an effect if the 'toolTip' attribute is also defined on the element or one of its ancestors.
<!ENTITY % stdDSVGAttrs |
The 'contextMenu' attribute specifies the 'id' attribute of an existing 'contextMenu' element. The contextMenu displays with its top-left corner at the position of the mouse pointer when the user right-clicks on the element.
Example 104_contextMenu shows a contextMenu associated to a circle, with no 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="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/contextMenu.js"/> <script type="text/ecmascript" xlink:href="dsvg11/attributeContextMenu.js"/> <script type="text/ecmascript" xlink:href="dsvg11/listbox.js"/> <!-- Begin 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: ContextMenu 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">Default context menu - Right-click within the circle to display the context menu. </text> <text y="395" x="20" font-size="12" id="additional_ex">The list consists of items which can be added directly as child elements of the context menu. </text> <text y="420" x="20" font-size="12" id="Final_ex">The context menu is associated with the circle by adding a dsvg:contextMenu attribute to the circle which references the context menu. </text> <text y="60" x="20" id="regular">Default Context Menu: </text> <text y="60" x="150" font-size="10" id="regular_desc">(default attributes) - right-click within the circle and the Context Menu should appear. </text> </g> <!--adding the controls--> <dsvg:contextMenu xlink:href="dsvg11/skinContextMenu_Default.svg#skinContextMenu" autoScale="true" label="Red Circle Menu" id="contextMenu1"> <dsvg:item value="Apple" data="plu_1" id="item_1"> <dsvg:itemData value="red" name="color"/> <dsvg:itemData value="$1.27" name="price"/> </dsvg:item> <dsvg:item value="Banana" data="plu_2" id="item_2"> <dsvg:itemData value="yellow" name="color"/> <dsvg:itemData value="$0.59" name="price"/> </dsvg:item> <dsvg:item value="Grapes" data="plu_3" id="item_3"> <dsvg:itemData value="purple" name="color"/> <dsvg:itemData value="$2.19" name="price"/> </dsvg:item> <dsvg:item value="Kiwi" data="plu_4" id="item_4"> <dsvg:itemData value="brown" name="color"/> <dsvg:itemData value="$0.89" name="price"/> </dsvg:item> </dsvg:contextMenu> <circle dsvg:contextMenu="contextMenu1" r="50" cy="130" cx="130" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="circle_blue"/> </svg>
|
View this example as SVG (SVG-enabled browsers only)
The 'drag' attribute specifies whether the element is movable (true) or not (false) by clicking and dragging it with the mouse.
Example 402_drag shows a circle and button that are draggable, as well as a circle and button that are not draggable.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> <svg dsvg:drag="true" 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/attributeDrag.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: drag (added attribute) </text> <text y="365" x="20" font-size="12" id="content">Content of file: dsvg:drag </text> <text y="380" x="20" font-size="12" id="expected">The dsvg:drag attribute is applied to elements to set the drag to either true or false. </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 --> <circle dsvg:drag="true" r="30" cy="150" cx="100" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="circle_true"/> <circle dsvg:drag="false" r="30" cy="270" cx="100" stroke-width="5" stroke="darkred" fill="red" id="circle_false"/> <dsvg:button dsvg:drag="true" xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="140" x="300" label="drag (true)" id="button_true"/> <dsvg:button dsvg:drag="false" xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" disabled="false" selected="false" toggle="false" height="18" width="100" y="260" x="300" label="drag (false)" id="button_false"/> <text y="110" x="20" id="text_true">Blue circle has drag="true" </text> <text y="230" x="20" id="text_true2">Red circle has drag="false" </text> <text y="110" x="300" id="text_true3">Button has drag="true" </text> <text y="230" x="300" id="text_true4">Button has drag="false" </text> <text y="70" x="20" id="text_true5">Select each of the objects and attempt to drag to another position. </text> </svg>
 |
 |
View this example as SVG (SVG-enabled browsers only)
The 'focus' attribute specifies whether the element has been selected or not. Selecting any object which has the 'focusGroup' attribute, via the event specified in the 'focus' element (e.g. onmouseover, onclick, etc.), does the following: causes its 'focus' attribute to be set to "true", sets the 'focus' attribute of other elements belonging to the same focusGroup to "false", and sets the 'focus' element's 'elementID' to be the ID of the element with focus.
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 'focusGroup' attribute specifies the 'id' attribute of the associated 'focus' element. Selecting any object which has the 'focusGroup' attribute, via the event specified in the 'focus' element (e.g. onmouseover, onclick, etc.), does the following: causes its 'focus' attribute to be set to "true", sets the 'focus' attribute of other elements belonging to the same focusGroup to "false", and sets the 'focus' element's 'elementID' to be the ID of the element with focus.
The 'share' attribute specifies the 'id' attribute of an existing 'share' element, causing the child elements of the 'share' element to be treated as children of this element as well. The children are not copied--they are instead used, or shared, by multiple elements.
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 'toolTip' attribute refers to the toolTip skin's parent element, stored either internally in the <defs> block, or in an external file. With this attribute on an element, that element and any of its descendents will display the value of their 'dsvg:title' attribute within the toolTip defined in the specified skin, whenever the user hovers over the element.
Example 405_toolTip shows three circles with toolTips--one follows the mouse, one has a delay and follows the mouse, and one does neither.
<?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/loadXML.js"/> <script type="text/ecmascript" xlink:href="dsvg11/attributeTooltip.js"/> <script type="text/ecmascript" xlink:href="dsvg11/combobox.js"/> <script type="text/ecmascript" xlink:href="dsvg11/textbox.js"/> <script type="text/ecmascript" xlink:href="dsvg11/contextMenu.js"/> <script type="text/ecmascript" xlink:href="dsvg11/slider.js"/> <script type="text/ecmascript" xlink:href="dsvg11/listBox.js"/> <script type="text/ecmascript" xlink:href="dsvg11/scrollbar.js"/> <script type="text/ecmascript" xlink:href="dsvg11/listview.js"/> <script type="text/ecmascript" xlink:href="dsvg11/spinBox.js"/> <script type="text/ecmascript" xlink:href="dsvg11/window.js"/> <script type="text/ecmascript" xlink:href="dsvg11/windowBase.js"/> <script type="text/ecmascript" xlink:href="dsvg11/attributeDrag.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: toolTip (added attribute) </text> <text y="365" x="20" font-size="12" id="content">Content of file: dsvg:toolTip </text> <text y="380" x="20" font-size="12" id="expected">The dsvg:toolTip attribute is applied to elements to enable the ability to display tooltips. </text> <text y="395" x="20" font-size="12" id="depend">Tip tracking and Tip Delay are added as seperate attributes if desired. </text> <text y="60" x="280" font-size="10" id="textControls">mouseover any of the UI controls to display its tooltip. </text> <line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/> <line y2="40" x2="270" y1="340" x1="270" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="vert_line"/> <!-- adding attributes --> <g dsvg:toolTip="dsvg11/skinTooltip.svg#skinTooltip_traditional" id="toolTips"> <circle dsvg:title="Tool Tip working" r="30" cy="80" cx="80" stroke-width="5" stroke="darkred" fill="red" id="circle_red"/> <circle dsvg:tipTrack="true" dsvg:tipDelay="" dsvg:title="Tool Tip and Tip Track working" r="30" cy="180" cx="80" stroke-width="5" stroke="orange" fill="yellow" id="circle_yellow"/> <circle dsvg:tipTrack="true" dsvg:tipDelay="2000" dsvg:title="Tool Tip Tip Track and Tip Delay working" r="30" cy="280" cx="80" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="circle_green"/> </g> <text y="120" x="50" font-size="10" id="red_text">mouse over red circle, Tool Tip should appear. </text> <text y="220" x="50" font-size="10" id="red_text2">Tool Tip w/ Tip Tracking applied. </text> <text y="320" x="50" font-size="10" id="red_text3">Tool Tip w/ Tip Tracking and Tip Delay applied. </text> <g transform="translate(250, 20)" dsvg:toolTip="dsvg11/skinTooltip.svg#skinTooltip_traditional"> <dsvg:button dsvg:title="button" dsvg:toolTip="dsvg11/skinTooltip.svg#skinTooltip_traditional" xlink:href="dsvg11/skinButton_Windows.svg#skinButton" autoScale="true" label="button" height="18" width="100" y="50" x="50" id="dsvgUniqueID_0"/> <dsvg:checkBox dsvg:title="checkbox" xlink:href="dsvg11/skinCheckbox_Default.svg#skinCheckBox" autoScale="true" height="12" width="12" y="100" x="50" label="button" id="dsvgUniqueID_2"/> <dsvg:comboBox dsvg:title="combobox" xlink:href="dsvg11/skinComboBox_Composite.svg#skinComboBox" autoScale="true" height="17" width="217" y="150" x="50" label="combobox" id="dsvgUniqueID_3"/> <dsvg:listBox dsvg:title="listbox" xlink:href="dsvg11/skinListBox_Composite.svg#skinListBox" autoScale="true" height="30" width="99" y="200" x="50" label="listbox" id="dsvgUniqueID_3"/> <dsvg:listView dsvg:title="lisview" xlink:href="dsvg11/skinListView_Composite.svg#skinListView" autoScale="true" height="30" width="99" y="250" x="50" label="listview" id="dsvgUniqueID_4"/> <dsvg:radioButton dsvg:title="radiobutton" xlink:href="dsvg11/skinRadioButton_Default.svg#skinRadioButton" autoScale="true" group="default" height="14" width="14" y="50" x="300" label="radiobutton" id="dsvgUniqueID_5"/> <dsvg:slider dsvg:title="slider" continuousCallback="true" xlink:href="dsvg11/skinSlider_Windows.svg#skinSlider" autoScale="true" ticksMinor="0.05" ticksMajor="0.25" pageIncrement="0" increment="0.05" value="0.5" max="1" min="0" height="18" width="200" y="100" x="300" label="slider" id="dsvgUniqueID_6"/> <dsvg:spinBox dsvg:title="spinbox" xlink:href="dsvg11/skinSpinBox_Composite.svg#skinSpinBox" autoScale="true" increment="1" value="1" max="10" min="0" height="18" width="118" y="150" x="300" label="spinbox" id="dsvgUniqueID_7"/> <dsvg:textBox dsvg:title="textbox" xlink:href="dsvg11/skinTextbox_Default.svg#skinTextBox" autoScale="true" height="18" width="114" y="200" x="300" label="textbox" id="dsvgUniqueID_8"/> <dsvg:window dsvg:title="window" xlink:href="dsvg11/skinWindow_Default.svg#skinWindow" autoScale="true" height="50" width="50" y="250" x="300" label="window" id="dsvgUniqueID_9"/> </g> </svg>
 |
View this example as SVG (SVG-enabled browsers only)
The 'tipDelay' attribute specifies the time, in milliseconds, between when the mouse cursor begins to hover over an element and when the toolTip actually appears. If this attribute is not provided, its default is 50. If the 'title' and 'toolTip' attributes do not exist for this element or one of its ancestors, this attribute is ignored and no toolTip will appear.
The 'tipTrack' attribute specifies whether the toolTip should move to follow the mouse cursor position (true) or stay fixed in place at the location it first appears (false). If this attribute is not provided, its default is "false". If the 'title' and 'toolTip' attributes do not exist for this element or one of its ancestors, this attribute is ignored and no toolTip will appear.
The 'title' attribute specifies the text to be displayed in the toolTip for this element. If this attribute is not provided, no toolTip will appear for this element. If the 'toolTip' attribute does not exist for this element or one of its ancestors, this attribute is ignored and no toolTip will appear.
The 'zoomAndPanAttribute' attribute specifies whether the element is immune to zooming and panning (disable) or not (magnify).
Example 406_zoomAndPan shows two circles, one of which is immune to zooming and panning.
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg SYSTEM "../SVGdSVG.dtd"> <svg xmlns:dsvg="http://www.corel.com/schemas/2002/dSVG11" xmlns:xlink="http://www.w3.org/1999/xlink" height="410px" width="744px" onload="init(evt)" viewBox="0 0 744 410"> <script type="text/ecmascript" xlink:href="dsvg11/dSVG.js"/> <script type="text/ecmascript" xlink:href="dsvg11/baseUI.js"/> <script type="text/ecmascript" xlink:href="dsvg11/constraint.js"/> <script type="text/ecmascript" xlink:href="dsvg11/zoom.js"/> <script type="text/ecmascript" xlink:href="dsvg11/attributeZoomAndPan.js"/> <script type="text/ecmascript" xlink:href="dsvg11/button.js"/> <!-- template --> <rect height="40" width="744" y="0" x="0" fill="#5f86B1" id="title_rect"/> <text y="25" x="20" font-weight="bold" font-size="18" fill="white" id="text_1">dSVG sample: zoomAndPan (added attribute) </text> <text y="365" x="20" font-size="12" id="content">Content of file: dsvg:zoom, dsvg:zoomAndPan </text> <text y="380" x="20" font-size="12" id="expected">The dsvg:zoom element will zoom in / zoom out by the amount specified in the scale attribute. </text> <text y="395" x="20" font-size="12" id="depend"/> <line y2="340" x2="744" y1="340" x1="0" stroke-width="2" stroke="#5f86B1" fill="#5f86B1" id="bottom_line"/> <!-- adding behavior --> <dsvg:button dsvg:zoomAndPan="magnify" xlink:href="dsvg11/skinButtonZoomIn.svg#skinButtonZoomIn" autoScale="true" disabled="false" selected="false" toggle="false" height="21" width="20" y="100" x="120" label="zoom in" id="button_in"> <dsvg:zoom type="relative" cy="50.5" cx="50.5" scale="2" id="dsvgUniqueID_2"/> </dsvg:button> <dsvg:button xlink:href="dsvg11/skinButtonZoomOut.svg#skinButtonZoomOut" autoScale="true" disabled="false" selected="false" toggle="false" height="21" width="20" y="100" x="170" label="zoom out" id="button_out"> <dsvg:zoom type="relative" cy="50.5" cx="50.5" scale="0.5" id="dsvgUniqueID_3"/> </dsvg:button> <circle dsvg:zoomAndPan="disable" r="30" cy="200" cx="180" stroke-width="5" stroke="darkred" fill="red" id="circle_disabled"/> <circle dsvg:zoomAndPan="magnify" r="30" cy="200" cx="350" stroke-width="5" stroke="darkblue" fill="#5f86B1" id="circle_magnified"/> <text y="330" x="20" font-size="10" id="zoom_text">dsvg:zoomAndPan attributes applied to: Red circle (disabled) Blue circle (magnify) </text> <text y="80" x="50" font-size="10" id="zoom_text1">Select the Zoom In / Zoom Out buttons. </text> </svg>
 |
 |
View this example as SVG (SVG-enabled browsers only)
