|
SVG/XML & THE DOM : JAVASCRIPT METHODS & EXAMPLES Applied within the Adobe SVG Viewer(ASV 3.03) and Internet Explorer Environment (IE6/7/8) Data-driven graphics is a seamless application for SVG. Its natural linkage to XML data files can create and dynamically change SVG elements. This provides a graphic display representing the data. Methods of interlacing XML data and SVG elements are presented herein. |
||
|
Last Updated: 05/19/2009 SVG/XML-DOM REFERENCE - This is an evolving core reference for those that are using the XML & SVG DOM to access and modify SVG elements and their attributes within the Adobe SVG Viewer. Choosing a method will 'run' the method function, show the related javascript code, and its resultant svg source. DYNAMIC SVG EXAMPLES - The examples demonstrate XML/SVG creating dynamic SVG, plus also present application concepts. Selecting an example will 'run' the example function, show the related javascript code, and its resultant svg source. Examples include communication to/from the server, using lean & clean Classic ASP, performing elegant xml file adjustments. MEET THE CAST - To simplify the examples, a few SVG elements have been created and named. Firstly, there's Godfather, otherwise known as the SVG document. Then there are three(3) teenage characters; "Shifty", "Smiley", and "Rosie", living at their Apartment, located in the 'Hood. They've volunteered to participate. |
|
Javascript Functions |
|
SVG Source |
|||
| ( ↓ drag/drop at border ↓ )( ↓ drag/drop at border ↓ ) | |||||
CLIENT-SIDE vs SERVER : rationale - When compared to a server, client computers are under-employed after the base document is loaded from the web. Therefore, first loading a lightweight base SVG document, then propagating it via tight XML files, building SVG elements client-side, is preferred over calling them from the server. QUESTIONS AND COMMENTS - Please contact me via email, or post comments, suggest examples, and discuss any related item at the Yahoo group: SVGdiscovery Author's Note: The code herein attempts to concisely present an example or concept, without regard to error trapping, other validation clutter, or wigetry ;). All code in these examples can be used without restrictions. |
||||||||||||||||||||||
| Javascript SVG Examples | |
| SVG Spirals | The SVG spiral path and its applications with XML. |
| SVG path examples | SVG path examples |
| Matrix Transformations | Using Javascript to create SVG matrix transforms |
| SVG symbol element examples | SVG symbol element examples |
| Global Map of Avian Flu | SVG graphics are created from an XML database. |
| Bubbles~n~Boxes | SVG drawings created from basic SVG elements. |
| Svg Icons | an application containing over 250 customizable icons. |
| Unicode Font Icons | Create over 4000 icons from Unicode SVG path images. |
| Unicode Font Icons | Trace SVG curved path elements over a background image template |
| Javascript XML/SVG DOM example: appendChild | mySVG.appendChild(myChild) | Adds an SVG element to an existing parent element | A red circle has been added to the Apartment group xml |
| Javascript XML/SVG DOM example: appendData | myTextElem.firstChild.appendData(myString) | Adds a string value to the text element | The text element has been appended xml |
| Javascript XML/SVG DOM example: attributes | mySVGElem.attributes | Returns a NamedNodeMap object containing attribute name elements | the <use> element 'Rosie' has 5 attributes |
| Javascript XML/SVG DOM example: childNodes | svgElem.childNodes | Returns a NodeList object | The Apartment group <g> has three children |
| Javascript XML/SVG DOM example: cloneNode | svgElem.cloneNode(true) | Creates a copy of an element | The clone 'shiftyTwin' has been added to the Apartment xml |
| Javascript XML/SVG DOM example: contextMenu | contextMenu.replaceChild(newMenuRoot, contextMenu.firstChild ) | An Adobe SVG Viewer menu element. Dynamically creates your personal context menus (right-click mouse) | The menus can be dynamically modified, and swapped-out based on user needs svg |
| Javascript XML/SVG DOM example: createAttribute | docSVG.createAttribute(attrStringName) | Returns Attr object | An empty attribute name can be added to elements xml |
| Javascript XML/SVG DOM example: createCDATASection | docSVG.creatCDATASection(myCDATAString) | CDATA is a convient locale to store SVG elements a strings | Four circles, formally CDATA strings, have been added to the Apartment xml |
| Javascript XML/SVG DOM example: createDocumentFragment | docSVG.createDocumentFragment() | A DocumentFragment is a location to conviently add/extract/store SVG elements | Shifty is gone from the Apartment: He has been extracted into the DocumentFragment xml |
| Javascript XML/SVG DOM example: createElement | docSVG.createElement("svgElementName") | A big red circle has been created | The big red circle is shown in the Apartment group <g> xml |
| Javascript XML/SVG DOM example: createNode | docSVG.createNode(Type,name,namespaceClutter) | There doesn't seem to be any use for this method in SVG | xml |
| Javascript XML/SVG DOM example: createSVGMatrix | mySVG.createSVGMatrix() | ||
| Javascript XML/SVG DOM example: createSVGRect | mySVG.createSVGRect() | Creates an SVGRect Object where attribute data can be stored and retrieved | |
| Javascript XML/SVG DOM example: currentScale | mySVG.currentScale | Read or write the scale (zoom level) of the SVG drawing. | |
| Javascript XML/SVG DOM example: currentTranslate | mySVG.currentTranslate | Read or write currentTranslate.x or currentTranslate.y | |
| Javascript XML/SVG DOM example: data | myTextElem.firstChild.data | Returns a string within any text element, or CDATA | |
| Javascript XML/SVG DOM example: deleteData | myTextElem.firstChild.deleteData(myOffset,myCount) | Parses out a segment of an existing text element string | xml |
| Javascript XML/SVG DOM example: documentElement | docSVG.documentElement | Returns the root svg element as SVGSVGElement object | |
| Javascript XML/SVG DOM example: evt | myFunction(evt) | evt is a reserved SVG word that describes the event that has just happened. | This method returns a reference to the SVG object that triggers the event. |
| Javascript XML/SVG DOM example: firstChild | svgElement.firstChild | Returns a reference object to the top child of the svgElement | |
| Javascript XML/SVG DOM example: getAttribute | myElement.getAttribute("attributeName") | Returns an attribute value string | xml |
| Javascript XML/SVG DOM example: getAttributeNode | svgElem.getAttributeNode("attrName") | Returns an Attr object. Using printNode(AttrObject) returns a string with both the attribute name equal its value: attributeName="my Value" | Provides an object for removeAttributeNode xml |
| Javascript XML/SVG DOM example: getBBox | svgElem.getBBox() | Returns an SVGRect object. The bounding box values x,y,width,height can be extracted | A bounding box rectangle was created for the text element "Cast Of Characters" |
| Javascript XML/SVG DOM example: getCTM | svgElem.getCTM() | Returns SVGMatrix object: current transform matrix (a b c d e f) for the element | The individual values (CosA SinA -SinA CosA x y) can be extracted |
| Javascript XML/SVG DOM example: getComputedTextLength | txtElem.getComputedTextLength | Returns a real number; the length of the text element | |
| Javascript XML/SVG DOM example: getElementById | docSVG.getElementById("myElementId") | Returns an element with the specific id, from anywhere within the SVG document | |
| Javascript XML/SVG DOM example: getElementsByTagName | myGroup.getElementsByTagName("svgElementName") | Returns all the elements with the requested node name | xml |
| Javascript XML/SVG DOM example: getNamedItem | svgElem.attributes.getNamedItem("myAttributeName") | Returns the Attr object. Returns null if not present | Using printNode(myAttrOb), returns the string: myAttrName="my attribute value" xml |
| Javascript XML/SVG DOM example: getNumberOfChars | myTextElem.getNumberOfChars | Returns an integer | |
| Javascript XML/SVG DOM example: getPointAtLength | SVGPathElement.getPointAtLength(floatNum) | Returns an SVGPoint object located on the path at the specified distance. | x=pntObj.x, y=pntObj.y |
| Javascript XML/SVG DOM example: getPropertyValue | myStyle.getPropertyValue('propName') | Extracts various property values from the CSSStyleDeclaration Object | |
| Javascript XML/SVG DOM example: getSVGDocument | docSVG=document.embeds["svgEmbed"].getSVGDocument() | Returns SVGDocument object. Used in the HTML page to initialize DOM communication with the SVG document | For multible SVG documents, use: docSVG1=document.embeds["svgEmbed1"].getSVGDocument; docSVG2=document.embeds["svgEmbed2"].getSVGDocument() |
| Javascript XML/SVG DOM example: getStyle | SVGelem.getStyle() | Returns a CSSStyleDeclaration Object | Individual properties can be extracted via myStyle.getPropertyValue('propName') |
| Javascript XML/SVG DOM example: getTotalLength | myPath.getTotalLength() | Returns a float value of the length of a path. | |
| Javascript XML/SVG DOM example: hasAttributes | svgElement.hasAttributes() | Returns binary true or false | |
| Javascript XML/SVG DOM example: hasChildNodes | svgElement.hasChildNodes() | Returns binary true or false | xml |
| Javascript XML/SVG DOM example: insertBefore | mySVG.insertBefore(newElement,thisElement) | Places new element before an existing element | xml |
| Javascript XML/SVG DOM example: insertData | myTextElem.firstChild.insertData(myOffset,myString) | Inserts a text string within an existing text string | The data has been inserted at CharactersText element xml |
| Javascript XML/SVG DOM example: item | mychildNodes.item(k) | Returns a specific child node of a parent | xml |
| Javascript XML/SVG DOM example: lastChild | svgParent.lastChild() | Returns the bottom child of a parent | |
| Javascript XML/SVG DOM example: load | myXML.load(xmlFile) | Loads an xml file into an XML DOM Document; myXml=new ActiveXObject('Msxml2.DOMDocument.3.0') | By use of the resident Adobe function parseXML, the XML elements become group of rectangles added to the Hood. xml |
| Javascript XML/SVG DOM example: loadXML | myXml.loadXML(xmlString) | Inserts as XML, a valid XML string within an XMLDOMDocument | xml |
| Javascript XML/SVG DOM example: matches | xmlCollection.matches(collectionNode) | If true returns the entire XML documentElement that contains the collection, or returns null if false. | Can be used to validate/determine if the original collectionNode has been removed xml |
| Javascript XML/SVG DOM example: matrixTransform | |||
| Javascript XML/SVG DOM example: nextNode | parentXMLnodes.nextNode | Iterates sequentially through the parent's node list, returning the child XML object | Retuns null if no sibling exists xml |
| Javascript XML/SVG DOM example: nextSibling | SVGelement.nextSibling | iterates through an element's siblings, returning the sibling SVG element object | |
| Javascript XML/SVG DOM example: nodeName | SVGelement.nodeName | Returns a string value for the element's node name | |
| Javascript XML/SVG DOM example: nodeType | SVGnode.nodeType | Returns the integer value of the node's type | |
| Javascript XML/SVG DOM example: nodeValue | SVGnode.nodeValue | If the node is an SVG element, returns the integer value of the element. However, if the node contains a string, returns the string value | |
| Javascript XML/SVG DOM example: parentNode | SVGelement.parentNode | Returns the parent node SVG element of the element | |
| Javascript XML/SVG DOM example: parseXML | parseXML(xmlElemString,docSVG) | It converts an XML string to an SVG element for insertion into the SVG document. | This is an Adobe function call in the SVG document. Four circles are placed, as a group, on the SVG drawing |
| Javascript XML/SVG DOM example: peekNode | ElementCollection.peekNode() | Returns the next element when iterating via nextNode, without advancing. | Returns null if no element exists xml |
| Javascript XML/SVG DOM example: previousSibling | myElement.previousSibling | Returns the previous element | |
| Javascript XML/SVG DOM example: printNode | printNode(svgElement) | It returns a text string of an SVG element | his is an Adobe SVg Viewer function call resident in the SVG document. |
| Javascript XML/SVG DOM example: removeAll | elXMLementsSelection.removeAll() | Removes all elements from the selection | xml |
| Javascript XML/SVG DOM example: removeAttribute | myElement.removeAttribute("attribName") | Extracts the attribute and its value from the element. Creates an *error* if the attribute is not present | To prevent errors, this method should generally be preceeded by, if(myElement.getAttribute("attribName")) xml |
| Javascript XML/SVG DOM example: removeAttributeNode | myElem.removeAttributeNode(attrObject) | The Attrib Object was provided via getAttributeNode | Creates an *error* if the requested node is null xml |
| Javascript XML/SVG DOM example: removeChild | mySVG.removeChild(thisElement) | Remove an element from any parent | xml |
| Javascript XML/SVG DOM example: removeNamedItem | myElement.attributes. removeNamedItem("attribName") | The item is the string attribute name within the element | Returns an *error* if the attribute is not present xml |
| Javascript XML/SVG DOM example: removeNext | XMLelementsSelection.removeNext() | Remove the next element when iterating through the selection | xml |
| Javascript XML/SVG DOM example: replaceChild | mySVG.replaceChild(newElement,oldElement) | Replaces an existing element with a new element | xml |
| Javascript XML/SVG DOM example: replaceData | myTextElem.firstChild.replaceData(myOffset,myCount,myString) | Insert a string segment with an existing text element string | xml |
| Javascript XML/SVG DOM example: rotate | |||
| Javascript XML/SVG DOM example: save (DOMDocument) | xml | ||
| Javascript XML/SVG DOM example: scale | |||
| Javascript XML/SVG DOM example: selectNodes | xmlDoc.selectNodes("XSL pattern") | Returns the collection of nodes that match the pattern, or an empty collection if none found | XSL pattern examples: ("nodeName[@attrName]") ; ("nodeName") ; (" * [@attrName]") xml |
| Javascript XML/SVG DOM example: selectSingleNode | xmlDoc.selectSingleNode("XSL pattern") | Returns the first/only xml element that matches the pattern, or null if not found | XSL pattern example: ("nodeName[@attrName='attrValue']") xml |
| Javascript XML/SVG DOM example: send (IXMLHTTPRequest) | xml | ||
| Javascript XML/SVG DOM example: setAttribute | myElement.setAttribute("attributeName",myAttribValue) | Sets a value for attribute. Creates the attribute name if not already present | xml |
| Javascript XML/SVG DOM example: setAttributeNode | xml | ||
| Javascript XML/SVG DOM example: setNamedItem | xml | ||
| Javascript XML/SVG DOM example: setProperty | myAttr.setProperty('value') | Sets the property value of an element's attribute | Used in SVG for setting style property values xml |
| Javascript XML/SVG DOM example: splitText | xml | ||
| Javascript XML/SVG DOM example: style | SVGelem.style | Returns a CSSStyleDeclaration Object | Individual properties can be extracted via myStyle.getPropertyValue('propName') |
| Javascript XML/SVG DOM example: substringData | xml | ||
| Javascript XML/SVG DOM example: tagName | |||
| Javascript XML/SVG DOM example: target | |||
| Javascript XML/SVG DOM example: text element = #text ***caution parse OUT | The #text element appears when hand-coding SVG documents. Caused by carriage returns and forced spaces | ||
| Javascript XML/SVG DOM example: translate | |||
| Javascript XML/SVG DOM example: xlink:href ***caution:NameSpace Clutter | Attribute name change required for XML transport | change to psuedo name before send |
| XML / SVG DOM Javascript Example : Access the SVG within the <embed> placed in the HTML page | <embed 'svgEmbed' src='svgDom.svg' style='width:300;height:300' type='image/svg+xml'></embed> | The svg source shown is the content of the src file |
| XML / SVG DOM Javascript Example : Load an XML file and place it as SVG elements on the drawing | Copies the downloaded XML element as circles within the Apartment | The Apartment source shows the addition of 40 circles |
| XML / SVG DOM Javascript Example : Drag/Drop elements then upload changes to the server | Drag/Drop the 3 characters and send the changes to the server (Be gentle, this is a 'live' update, and will remain until others change it. ) | After the 'send' button is selected, the ASP file which updates the XML file, is sent to the right textarea. The updated XML file is placed in the left textarea. |
| XML / SVG DOM Javascript Example : Build new elements client-side and send them to the server | Insert attribute values and send one or more circles to the server | After the 'send' button is selected, The WhazHappenen group is updated above. Your updated XML file is shown in the left textarea. |
| XML / SVG DOM Javascript Example : Generate unique id and time stamp for a new XML file and/or each element | The newly created XML file is shown in the source textarea. After the new XML file is created, send a bunch of new elements for id markings | After the 'send' button is selected, your updated XML file is shown in the left textarea. The ASP file that updated the XML file is shown in the right textarea |
| XML / SVG DOM Javascript Example : Use XML data to build SVG elements. | SVG elements can be created, and the XML data can be attached to them. This can occur at either the server or client | The SVG drawing shows the Hood Police Department's statistics, contained in an XML file, for 911 calls during the past month. |
| XML / SVG DOM Javascript Example : An XML data format strategy for building SVG elements | Consider a simple client-side interpreter when dealing with thousands of XML elements that will create SVG elements. | The XML data can be a ghost element used to build a rich SVG element at client-side |
| XML / SVG DOM Javascript Example : Use the SVG image as the GUI for updates | Click on Shifty, Smiley, or Rosie, then select their color. Send the update to the server. (Be gentle, these are live updates that will remain until others change it. ) | After the change is sent to the server, the updated XML file is shown in the left textarea. The ASP file, that updated the xml file is shown in the right textarea. The ideal editor is one where the active/updated SVG image is a seamless snap-in. |
| XML / SVG DOM Javascript Example : Viewing dense clusters of symbols | Symbols are seperated so they can be individually viewed. Click on the cluster to seperate them and zoom in. Re-click to return the symbols to their original locations | Symbols are dynamically arranged in a circle with associated arrow lines pointing to their original location. |
| XML / SVG DOM Javascript Example : Placing symbols along a spiral timeline | Click on the spiral to load 500 symbols, where each symbol has its date of creation used to place it along the spiral timeline | All symbols, following the initial loading, are individually viewable through parsing and sorting techniques |
| XML / SVG DOM Javascript Example : Overwriting the SVG file with a new SVG file | Copy the new SVG file into an XML file, removing DOCTYPE, and replace attribute name xlink:href with xref | Purge the existing SVG elements, call the XML file, then insert the new elements. |
| XML / SVG DOM Javascript Example : Communication between two SVG documents | The second SVG document is called into an empty IFRAME (svg2Frame). Click on its blue circle. Then click on the top SVG's blue square | The SVG2 can access any element in the original via the 'parent.' prefix. The top SVG drawing can communicate to SVG2 via document.frames.svg2Frame prefix |
| XML / SVG DOM Javascript Example : Take a snapshot of global data at each update | Drag/drop Shifty, Smiley, and/or Rosie, send update after each sequence. After a few updates, select playback to step backwards. | Following each update, the updated snapshot XML file is shown in the right textarea. Continually store the snapshots for use in a historical playback presentation and data recovery. |
| XML / SVG DOM Javascript Example : Load 50,000 unique SVG elements via XML files | Select the number of elements to be loaded, then select 'Start' button to load them. Reset to run another value. | After the elements are loaded, evaluate zooming/panning the drawing, plus page scrolling and drag/drop. |
| XML / SVG DOM Javascript Example : SVG element data display within a web page | Use on mouse over to display the data associated with each element. Data display location remains consistent during both vertical scroll and drag/drop | This provides x,y location and uses the PopUp Object to properly place the data display, over the image, within the web page |
| XML / SVG DOM Javascript Example : Monitor dynamic user-created XML files | Track file creation and size, plus evaluate anomalies. Creates a monitoring XML file for reports | By use of the Javascript Enumerator and FileSystemObject, the folders and subfolders files can be recursively accessed. |
| XML / SVG DOM Javascript Example : Build a data-symbol library for XML elements | Creates an object library that can produce both static and dynamic symbols. Dynamic symbols, shown with a black border(click to change them), will be modified in appearence, via user or program request | Each symbol object is an SVGElement, easily scalable and positioned, with various attributes accessable, either globally or individually |
| XML / SVG DOM Javascript Example : Import, create and update HTML<table> directly in the SVG image | Copy/paste existing data tables, or create new tables. Edit their format and position, plus update its contents. | Table structure and data are stored in an XML file. Data to the tables is input either directly, or from other sources linked to its XML file. |
| XML / SVG DOM Javascript Example : User session auto updates to SVG image from XML files | Select 'stop', then 'playback' to step back through updates. Select 'restart' to continue updates | |
| XML / SVG DOM Javascript Example : Real-time tracking of multi-user data symbol changes | User changes are seamlessly uploaded and monitored, interleaved with other users. Sign-in with a user name, select 'go', then drag/drop the Characters. | trackingUpdateSpan>By use of accurate time analysis plus strict ID mapping, each changing element interfaces in its satellite 'tracking' hive. Activated during single and multi-user simultaneous sessions. This concept minimizes contact with the main database. class=small style='text-style:italic'>NOTE: Another user style='color:crimson'>TheGhost also goes online, making random character location changes at random times |
| XML / SVG DOM Javascript Example : Building & Updating a serpentined data-disc community | The compact spiral arrangement allows individual display for each class=medium disabled style='color:purple;text-decoration:underline;border-width:0;background-color:transparent;' showDisc_Example21Button onClick=showDisc_Example21() title='See typical disc'>data-disc, showing their changes within their segment. title='Start data flow' startData_Example21Button disabled onClick=startData_Example21()>start title='Stop data flow' stopData_Example21Button disabled onClick=stopData_Example21()>stop Show All: style='width:30;height:30;' checked showDiscRadio name=showDiscRadio type=radio disabled onClick=showDiscs_Example21()> Show Changed: style='width:30;height:30;' type=radio showDiscRadio name=showDiscRadio disabled onClick=showDiscs_Example21()> | example21_discStatusSpan>The server is sending XML data packets, updating the status of community discs. The incoming data is shown above in the Source textarea. |
| XML / SVG DOM Javascript Example : Rotation, Scaling plus Drag/Drop, of SVG data symbols. | Interactive rotation, scaling, plus drag/drop, of the symbols. Select an option, then select a symbol. class=small>Select options in sequential order | With use of the transform matrix and a SVG 'wrapper' element, seamless rotation, scaling and drag/drop, is provided. |
| XML / SVG DOM Javascript Example : Searching an XML database with SVG Thumbnail images | Search the status(color) of data-disc types(elements). Choose an element and its color. Select 'go' to display thumbnails of their communities. | example23_foundSpan>A search/thumbnail algorithm scans the community files and finds the communities with the most status/discs that match the search criteria. A representative portion of the community is returned for its thumbnail. |
| List of SVG elements and their attributes and propeties values | ||
| ATTRIBUTE: clip-path | PROPERTY: uriValue PROPERTY: none | SVG Element: circle SVG Element: ellipse SVG Element: g SVG Element: image SVG Element: line SVG Element: path SVG Element: polygon SVG Element: polyline SVG Element: rect SVG Element: svg SVG Element: symbol SVG Element: text SVG Element: tspan SVG Element: textPath SVG Element: use |
| ATTRIBUTE: cx | PROPERTY: cxValue | SVG Element: circle SVG Element: ellipse |
| ATTRIBUTE: cy | PROPERTY: cyValue | SVG Element: circle SVG Element: ellipse |
| ATTRIBUTE: dx | PROPERTY: dxValue | SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: dy | PROPERTY: dyValue | SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: d | PROPERTY: flagXYValues PROPERTY: Z | SVG Element: path SVG Element: clipPath |
| ATTRIBUTE: fill-opacity | PROPERTY: opacityValue | SVG Element: circle SVG Element: ellipse SVG Element: polygon SVG Element: rect SVG Element: path SVG Element: polyline SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: fill-rule | PROPERTY: nonzero PROPERTY: evenodd | SVG Element: polygon SVG Element: path SVG Element: polyline |
| ATTRIBUTE: fill | PROPERTY: fillColorValue PROPERTY: none | SVG Element: circle SVG Element: ellipse SVG Element: polygon SVG Element: rect SVG Element: path SVG Element: polyline SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: font-family | PROPERTY: familyValue | SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: font-size-adjust | PROPERTY: adjustFactorValue PROPERTY: none | SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: font-size | PROPERTY: sizeValue PROPERTY: relativeValue PROPERTY: lengthValue PROPERTY: percentageValue | SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: font-style | PROPERTY: normal PROPERTY: italic PROPERTY: oblique | SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: font-weight | PROPERTY: normal PROPERTY: bold | SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: height | PROPERTY: heightValue | SVG Element: use SVG Element: svg SVG Element: image SVG Element: rect |
| ATTRIBUTE: letter-spacing | PROPERTY: normal PROPERTY: spacingValue | SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: marker-end | PROPERTY: uriMarkerValue | SVG Element: path SVG Element: line SVG Element: polyline SVG Element: polygon |
| ATTRIBUTE: marker-mid | PROPERTY: uriMarkerValue | SVG Element: path SVG Element: line SVG Element: polyline SVG Element: polygon |
| ATTRIBUTE: marker-start | PROPERTY: uriMarkerValue | SVG Element: path SVG Element: line SVG Element: polyline SVG Element: polygon |
| ATTRIBUTE: opacity | PROPERTY: opacityValue | SVG Element: circle SVG Element: ellipse SVG Element: g SVG Element: image SVG Element: line SVG Element: path SVG Element: polygon SVG Element: polyline SVG Element: rect SVG Element: svg SVG Element: symbol SVG Element: text SVG Element: tspan SVG Element: textPath SVG Element: use |
| ATTRIBUTE: overflow | PROPERTY: visible PROPERTY: hidden | SVG Element: svg |
| ATTRIBUTE: points | PROPERTY: pointsXYValue | SVG Element: polygon |
| ATTRIBUTE: rx | PROPERTY: rxValue | SVG Element: ellipse SVG Element: rect |
| ATTRIBUTE: ry | PROPERTY: ryValue | SVG Element: ellipse SVG Element: rect |
| ATTRIBUTE: stroke-dasharray | PROPERTY: dasharrayValue | SVG Element: circle SVG Element: ellipse SVG Element: polygon SVG Element: rect SVG Element: line SVG Element: path SVG Element: polyline SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: stroke-dashoffset | PROPERTY: dashOffsetValue | SVG Element: circle SVG Element: ellipse SVG Element: polygon SVG Element: rect SVG Element: line SVG Element: path SVG Element: polyline SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: stroke-linecap | PROPERTY: butt PROPERTY: round PROPERTY: square | SVG Element: polygon SVG Element: rect SVG Element: line SVG Element: path SVG Element: polyline SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: stroke-linejoin | PROPERTY: miter PROPERTY: round PROPERTY: bevel | SVG Element: polygon SVG Element: rect SVG Element: line SVG Element: path SVG Element: polyline SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: stroke-opacity | PROPERTY: opacityValue | SVG Element: circle SVG Element: ellipse SVG Element: polygon SVG Element: rect SVG Element: line SVG Element: path SVG Element: polyline SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: stroke-width | PROPERTY: strokeWidthValue | SVG Element: circle SVG Element: ellipse SVG Element: polygon SVG Element: rect SVG Element: line SVG Element: path SVG Element: polyline SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: stroke | PROPERTY: strokeColorValue | SVG Element: circle SVG Element: ellipse SVG Element: polygon SVG Element: rect SVG Element: line SVG Element: path SVG Element: polyline SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: text-anchor | PROPERTY: start PROPERTY: middle PROPERTY: end | SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: text-decoration | PROPERTY: none PROPERTY: underline PROPERTY: overline PROPERTY: line-through | SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: transform | PROPERTY: matrixCosSinNegsinCosXYValue PROPERTY: translateXYValue PROPERTY: scaleValue PROPERTY: rotateAngleValue PROPERTY: skewXRadiansValue PROPERTY: skewYRadiansValue | SVG Element: circle SVG Element: ellipse SVG Element: g SVG Element: image SVG Element: line SVG Element: path SVG Element: polygon SVG Element: polyline SVG Element: rect SVG Element: svg SVG Element: symbol SVG Element: text SVG Element: tspan SVG Element: textPath SVG Element: use |
| ATTRIBUTE: viewBox | PROPERTY: minXValue PROPERTY: minYValue PROPERTY: VBwidthValue PROPERTY: VBheightValue | SVG Element: svg |
| ATTRIBUTE: width | PROPERTY: widthValue | SVG Element: use SVG Element: svg SVG Element: image SVG Element: rect |
| ATTRIBUTE: word-spacing | PROPERTY: normal PROPERTY: wordSpaceValue | SVG Element: text SVG Element: tspan SVG Element: textPath |
| ATTRIBUTE: x1 | PROPERTY: x1Value | SVG Element: line |
| ATTRIBUTE: x2 | PROPERTY: x2Value | SVG Element: line |
| ATTRIBUTE: x | PROPERTY: xValue | SVG Element: image SVG Element: rect SVG Element: text SVG Element: tspan SVG Element: textPath SVG Element: use SVG Element: svg |
| ATTRIBUTE: y1 | PROPERTY: y1Value | SVG Element: line |
| ATTRIBUTE: y2 | PROPERTY: y2Value | SVG Element: line |
| ATTRIBUTE: y | PROPERTY: yValue | SVG Element: image SVG Element: rect SVG Element: text SVG Element: tspan SVG Element: textPath SVG Element: use SVG Element: svg |
){kind=link}