Prev: AJAX realtime updates to group of data
Next: IE work. Firefox Does not...help
From: Holger Jeromin on 24 Apr 2008 11:05

Hello,

i need to add SVG things direct in a Website. I know XHTML is best used
for that, with works nice in Firefox and Opera.

Internet Explorer is more challenging...

I have ported my XHTML example to HTML. I am able to manipulate the CSS
in my Adobe SVG-Viewer 3 via Javascript.

The IE is working in Quirksmode (no Doctype) so it will display SVG
inline my HTML code.

---------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:svg="http://www.w3.org/2000/svg" xml:lang="en">
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>SVG Test incl DOM Manipulation</title>
<object id="AdobeSVG"
classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"></object>
<?import namespace="svg" implementation="#AdobeSVG"?>
<script type="text/javascript">
xPosition = 10;

function addCircleFirstRun (){
Node = document.createElement('svg:circle');
Node.setAttribute("cy", "50", 0);
Node.setAttribute("r", "5", 0);
Node.setAttribute("cx", xPosition, 0);
document.getElementById("svgfeld").appendChild(Node);
xPosition = xPosition + 10;
}

function addCircleRunTime(){
Node = document.createNode(1, "svg:circle",
"http://www.w3.org/2000/svg");
Node.setAttribute("cy", "50");
Node.setAttribute("r", "5");
Node.setAttribute("cx", xPosition);
document.getElementById("svgfeld").appendChild(Node);
xPosition = xPosition + 10;
}
</script>
</head>
<body>
<p>
<input onclick="addCircleRunTime()" type="button" value="Add Element">
</p>
<p>
<svg:svg id="svgfeld" width="500" height="100">
<svg:polyline points="0,10 8,20 16,0" style="stroke:green;fill:none;"/>
<svg:circle cx="5" cy="50" r="5" />
</svg:svg>
</p>
<script type="text/javascript">
addCircleFirstRun();
</script>
</body></html>
---------------------------------------------------------


I want to add a new circle Node to the SVG Tree. The first works as
expected, but the same function called by the button does not work.

I had no luck in building a working addCircleRunTime function with the
Namespace aware createNode.

Can someone help me?

--
best regards
Holger Jeromin
From: Martin Honnen on 24 Apr 2008 11:28
Holger Jeromin wrote:

> function addCircleRunTime(){
> Node = document.createNode(1, "svg:circle",
> "http://www.w3.org/2000/svg");
> Node.setAttribute("cy", "50");
> Node.setAttribute("r", "5");
> Node.setAttribute("cx", xPosition);
> document.getElementById("svgfeld").appendChild(Node);
> xPosition = xPosition + 10;
> }

For IE and Adobe SVG viewer you can code it like this:

function addCircleRunTime(){
var svgDoc = document.getElementById('svgfeld').getSVGDocument();
var circle = svgDoc.createElementNS('http://www.w3.org/2000/svg',
'circle');
circle.setAttributeNS(null, 'cx', xPosition);
circle.setAttributeNS(null, 'cy', '50');
circle.setAttributeNS(null, 'r', '5');
svgDoc.documentElement.appendChild(circle);
xPosition = xPosition + 10;
}


--

Martin Honnen
http://JavaScript.FAQTs.com/
 | 
Pages: 1
Prev: AJAX realtime updates to group of data
Next: IE work. Firefox Does not...help