<
svg id="svg-root"
width="450"
height="450"
onload="onLoad(evt)" xmlns:xlink="
http://www.w3.org/1999/xlink" xmlns="
http://www.w3.org/2000/svg" >
<
title id="test-title">extend-multiNS-BE-01</
title>
<
desc id="test-desc">
Test the use of multiple namespaces.
</
desc>
<
g id="test-body-content">
<
g xmlns:bd="
http://example.org/ExampleBusinessData" >
<
defs>
<
script type="text/ecmascript">
var svg_ns = "http://www.w3.org/2000/svg";
function onLoad(evt){
// Get Document
var svgElement = evt.target;
var doc = svgElement.ownerDocument;
var resultsElement = doc.getElementById('results');
var gElement = doc.getElementById('PieParent');
// Count the number of regions.
RegionNodeList = doc.getElementsByTagName("bd:Region");
regionCount = RegionNodeList.length;
// Get the region data.
RegionNameNodeList = doc.getElementsByTagName("bd:RegionName");
RegionResultNodeList = doc.getElementsByTagName("bd:RegionResult");
// Get the sum of the values of the regions.
var total = 0;
for (regionIndex = 0; regionIndex < regionCount; regionIndex++)
total = total + Number(RegionResultNodeList.item(regionIndex).firstChild);
// Build a pie chart.
var startAngle = 0;
for (regionIndex = 0; regionIndex < regionCount; regionIndex++) {
regionName = RegionNameNodeList.item(regionIndex).firstChild;
regionResult = RegionResultNodeList.item(regionIndex).firstChild;
// Build the pie slice.
textElement = doc.createElementNS(svg_ns, "text");
textNode = doc.createTextNode(regionName);
textElement.appendChild(textNode);
pathElement = doc.createElementNS(svg_ns, "path");
endAngle = startAngle - regionResult * Math.PI * 2 / total;
dAttribute = "M225,225 L";
gray = Number(255 * (regionIndex+2)) / (regionCount+2);
midAngle = (startAngle + endAngle) / 2;
textElement.setAttribute("x", Math.round(225+65*Math.cos(midAngle)));
textElement.setAttribute("y", Math.round(225+65*Math.sin(midAngle)));
dAttribute = dAttribute + Math.round(225+100*Math.cos(startAngle));
dAttribute = dAttribute + ',';
dAttribute = dAttribute + Math.round(225+100*Math.sin(startAngle));
dAttribute = dAttribute + ' A100,100 0 0,0 ';
dAttribute = dAttribute + Math.round(225+100*Math.cos(endAngle));
dAttribute = dAttribute + ',';
dAttribute = dAttribute + Math.round(225+100*Math.sin(endAngle));
dAttribute = dAttribute + 'z';
pathElement.setAttribute("d", dAttribute);
pathElement.setAttribute("fill", "rgb("+gray+","+gray+","+gray+")");
pathElement.setAttribute("stroke", "black");
pathElement.setAttribute("stroke-width", "2");
// Temporary, for CSS styling.
pathElement.setAttribute("style", "fill:rgb("+gray+","+gray+","+gray+"); stroke:black; stroke-width:2");
if (regionIndex == 0) {
var firstSliceOffset = 30;
var transformValue = "translate(" +
Math.round(firstSliceOffset * Math.cos(midAngle)) +
"," +
Math.round(firstSliceOffset * Math.sin(midAngle)) +
")";
pathElement.setAttribute("transform", transformValue);
textElement.setAttribute("transform", transformValue);
pathElement.setAttribute("fill", "#FF6666");
pathElement.setAttribute("stroke", "#0000FF");
pathElement.setAttribute("stroke-width", "3");
// Temporary, for CSS styling.
pathElement.setAttribute("style", "fill:#FF8888; stroke:#0000FF; stroke-width:3");
}
gElement.appendChild(pathElement);
gElement.appendChild(textElement);
startAngle = endAngle;
}
}
</
script>
</
defs>
<bd:Results
id="results">
<bd:Region>
<bd:RegionName>East</bd:RegionName>
<bd:RegionResult>3</bd:RegionResult>
</bd:Region>
<bd:Region>
<bd:RegionName>North</bd:RegionName>
<bd:RegionResult>4</bd:RegionResult>
</bd:Region>
<bd:Region>
<bd:RegionName>West</bd:RegionName>
<bd:RegionResult>5</bd:RegionResult>
</bd:Region>
<bd:Region>
<bd:RegionName>South</bd:RegionName>
<bd:RegionResult>6</bd:RegionResult>
</bd:Region>
</bd:Results>
<
text style="
font-family:Helvetica;
font-size:16;
text-anchor:middle;"
x="225"
y="40">
Pie chart built from data in a different namespace.
</
text>
</
g>
<
g id="PieParent"
style="
font-family:Helvetica;
text-anchor:middle;
font-size:14;">
<
desc>Pie chart is built within this 'g' element</
desc>
</
g>
</
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">extend-multiNS-BE-01</
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>
