<
svg id="svg-root"
width="450"
height="450"
onload="domTest(evt)" xmlns:xlink="
http://www.w3.org/1999/xlink" xmlns="
http://www.w3.org/2000/svg" >
<
title id="test-title">dom-svg-BE-02</
title>
<
desc id="test-desc">Checks if SVG DOM ECMA Script binding is supported</
desc>
<
g id="test-body-content">
<
script type="text\ecmascript">
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.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.getParentNode().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.width.baseVal.value = width;
newRect.height.baseVal.value = height;
//
// Insert new element in DOM tree
//
rect.getParentNode().insertBefore(newRect, rect);
}
</
script>
<
rect id="rectId"
x="40"
y="150"
width="50"
height="50"
style="
fill:red;"
fill="red"/>
</
g>
<
g id="test-legend"
style="
fill:black;
font-family:Helvetica;
font-size:10;">
<
rect x="10"
y="390"
width="275"
height="50"
style="
fill:none;
stroke:#000000;"/>
<
path style="
fill:none;
stroke:#000000;"
d="M10 405 h275 M205 405 v35 M10 426 h195 M205 422 h80"/>
<
text x="25"
y="401">Scalable Vector Graphics (SVG) Conformance Suite</
text>
<
a xlink:href="copyright-documents-19990405.html">
<
text x="12"
y="437"
style="
fill:blue;">
Copyright 2000 W3C. All Rights Reserved.
</
text>
</
a>
<
text style="
font-size:12;"
x="35"
y="420">dom-svg-BE-02</
text>
<
text style="
font-size:10;"
x="210"
y="417">$Revision: 1.1 $</
text>
<
text style="
font-size:10;"
x="210"
y="435">Release 2.0</
text>
<
rect id="test-frame"
x="1"
y="1"
width="448"
height="448"
style="
fill:none;
stroke:#000000;"/>
</
g>
</
svg>