Adding SVG via Javascript in Explorer

Discussion in 'Javascript' started by Holger Jeromin, Apr 24, 2008.

  1. 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=""
    xmlns:svg="" xml:lang="en">
    <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"
    <?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);
    xPosition = xPosition + 10;

    function addCircleRunTime(){
    Node = document.createNode(1, "svg:circle",
    Node.setAttribute("cy", "50");
    Node.setAttribute("r", "5");
    Node.setAttribute("cx", xPosition);
    xPosition = xPosition + 10;
    <input onclick="addCircleRunTime()" type="button" value="Add Element">
    <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" />
    <script type="text/javascript">

    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?
    Holger Jeromin, Apr 24, 2008
    1. Advertisements

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

    function addCircleRunTime(){
    var svgDoc = document.getElementById('svgfeld').getSVGDocument();
    var circle = svgDoc.createElementNS('',
    circle.setAttributeNS(null, 'cx', xPosition);
    circle.setAttributeNS(null, 'cy', '50');
    circle.setAttributeNS(null, 'r', '5');
    xPosition = xPosition + 10;
    Martin Honnen, Apr 24, 2008
    1. Advertisements

  3. Martin Honnen schrieb am 24.04.2008 17:28:
    Perfekt. Thanks a lot!
    Holger Jeromin, Apr 25, 2008
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.