By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,299 Members | 1,228 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,299 IT Pros & Developers. It's quick & easy.

Adding SVG via Javascript in Explorer

P: n/a

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(Nod e);
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(Nod e);
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
Jun 27 '08 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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(Nod e);
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/
Jun 27 '08 #2

P: n/a
Martin Honnen schrieb am 24.04.2008 17:28:
For IE and Adobe SVG viewer you can code it like this:
[...]
Perfekt. Thanks a lot!

--
Mit freundlichen Grüßen
Holger Jeromin
Jun 27 '08 #3

This discussion thread is closed

Replies have been disabled for this discussion.