Full version, Basic version

Specification link: 5.11 DOM interfaces

script-handle-04-b ← index → struct-dom-02-b

struct-dom-01-b
SVG Image PNG Image
struct-dom-01-b Checks if SVG DOM ECMA Script binding is supported function domTest(evt) { var svg_ns = "http://www.w3.org/2000/svg"; // Get Document var target = evt.target; var doc = target.ownerDocument; // // Test that our rectangle is an SVGElement instance // var rect = doc.getElementById("rectId"); var rootSVG = rect.ownerSVGElement; var rootId = rootSVG.getAttribute( "id" ); // Insert a new text element to the DOM tree using the id var newText = doc.createElementNS(svg_ns, 'text'); newText.setAttribute('x', '50'); newText.setAttribute('y', '100'); var message = "This document's root identifier is: " + rootId var textContent = doc.createTextNode(message); newText.appendChild(textContent); rect.parentNode.appendChild(newText); // // Now, check that our rectangle is an instance of SVGRect by accessing // specific methods in order to get its x, y, width and height attributes. // var x = rect.x.baseVal.value; // SVGRect -> SVGAnimatedLenght -> SVGLength -> long var y = rect.y.baseVal.value; var width = rect.width.baseVal.value; var height = rect.height.baseVal.value; // // Now, build a new SVGRect through the SVGSVGElement interface. // var newRect = doc.createElementNS(svg_ns, 'rect'); // // Set the x, y, width and height of this element // newRect.x.baseVal.value = x + 10; newRect.y.baseVal.value = y + 10; newRect.setAttribute("width", width); newRect.setAttribute("height", height); // // Insert new element in DOM tree // rect.parentNode.insertBefore(newRect, rect); } $Revision: 1.1 $ raster image of struct-dom-01-b

Verify the basic capability to handle the SVG DOM API. The test is composed of a top level svg element with an 'onload' event handler and a rect element. Both the svg and the rect elements have an identifier. The 'onload' handler invokes SVG-specific DOM API methods which use these identifiers.

First, the handler gets the SVG element owner of the rect element and checks it has the expected identifier. Then, the handler accesses the coordinates of the rect element and uses them to build a 'shadow' rectangle under the existing one. Finally, the 'shadow' rectangle is created using the SVGSVGElement's createSVGRect method.

If an implementation supports the ECMA Script DOM binding for SVG, then the image should show the following text: "This document's root identifier is: svg-root" and a red rectangle with a black shadow rectangle. Otherwise, only a red rectangle will show.

The rendered picture should match the reference image.

script-handle-04-b ← index → struct-dom-02-b