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="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?
     
    Holger Jeromin, Apr 24, 2008
    #1
    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('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, Apr 24, 2008
    #2
    1. Advertisements

  3. Martin Honnen schrieb am 24.04.2008 17:28:
    Perfekt. Thanks a lot!
     
    Holger Jeromin, Apr 25, 2008
    #3
    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.