473,385 Members | 1,620 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Adding SVG via Javascript in Explorer


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
2 2194
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

19
by: Sjaakie Helderhorst | last post by:
Hello, I need to add a Javascript event (onClick) to a servercontrol (asp:checkbox). Checkbox is named 'cbDoMail'. Assumed that 'cbDoMail.Attributes.Add("onClick", "doJavascriptThing()") would do...
1
by: naija naija | last post by:
Hi Everyone, I'd like to add this to my asp.net page. Can somebody guide me on how to do this? Thanks in advance < script language="JavaScript"> < !-- if (document.layers) {...
2
by: David Tilman | last post by:
I'm new to ASP .NET and have run into a problem. I have a child page open in a web application that the user adds information to and then clicks the save button. The information is added to a...
0
by: ChrisMiddle10 | last post by:
Sorry to bother everyone with this question, but the answer to this the question is difficult to search for. I want to add javascript to an HtmlInputButton control attribute. A portion of the...
6
by: affiliateian | last post by:
Total newbie here for this so please be patient. We manually update our XML feed when we publish an article on our website. Can we add a javascript tracking pixel (from phpadsnew) into the XML...
1
by: trint | last post by:
How can I add javascript to my code view of my default.aspx file and get my meny to show? Here is the code I want to display (it's obviously a menu): <!-- menu script itself. you should not...
1
by: sarwarmohiuddin | last post by:
Hello MAtes, I am having this problem of adding a script element in a rich text editor box. i am doing this. The problem is that it won't add the script tag alltogather, or give an error "Unknown...
14
by: darrel | last post by:
Is it possible to pre-empt the javascript function used to do a postback from a linkbutton? I'd like to use linkbutton to delete a record and want to add a confirmation box via javascript "are...
2
by: cwyte | last post by:
Hello Everyone, I am new to javascript and the XMLDOM, this is my first post in th forum :) I am trying to populate the content of a javascript created explorer tree using an XML document. ...
5
tjc0ol
by: tjc0ol | last post by:
Hi all, I made contact page which allows visitors to input their name, email address, phone number, comments and select a comment type by using <select> element in html with javascript. Among the...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.