Adding SVG via Javascript in Explorer

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Holger Jeromin

    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 addCircleFirstR un (){
    Node = document.create Element('svg:ci rcle');
    Node.setAttribu te("cy", "50", 0);
    Node.setAttribu te("r", "5", 0);
    Node.setAttribu te("cx", xPosition, 0);
    document.getEle mentById("svgfe ld").appendChil d(Node);
    xPosition = xPosition + 10;
    }

    function addCircleRunTim e(){
    Node = document.create Node(1, "svg:circle ",
    "http://www.w3.org/2000/svg");
    Node.setAttribu te("cy", "50");
    Node.setAttribu te("r", "5");
    Node.setAttribu te("cx", xPosition);
    document.getEle mentById("svgfe ld").appendChil d(Node);
    xPosition = xPosition + 10;
    }
    </script>
    </head>
    <body>
    <p>
    <input onclick="addCir cleRunTime()" 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:g reen;fill:none; "/>
    <svg:circle cx="5" cy="50" r="5" />
    </svg:svg>
    </p>
    <script type="text/javascript">
    addCircleFirstR un();
    </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 addCircleRunTim e function with the
    Namespace aware createNode.

    Can someone help me?

    --
    best regards
    Holger Jeromin
  • Martin Honnen

    #2
    Re: Adding SVG via Javascript in Explorer

    Holger Jeromin wrote:
    function addCircleRunTim e(){
    Node = document.create Node(1, "svg:circle ",
    "http://www.w3.org/2000/svg");
    Node.setAttribu te("cy", "50");
    Node.setAttribu te("r", "5");
    Node.setAttribu te("cx", xPosition);
    document.getEle mentById("svgfe ld").appendChil d(Node);
    xPosition = xPosition + 10;
    }
    For IE and Adobe SVG viewer you can code it like this:

    function addCircleRunTim e(){
    var svgDoc = document.getEle mentById('svgfe ld').getSVGDocu ment();
    var circle = svgDoc.createEl ementNS('http://www.w3.org/2000/svg',
    'circle');
    circle.setAttri buteNS(null, 'cx', xPosition);
    circle.setAttri buteNS(null, 'cy', '50');
    circle.setAttri buteNS(null, 'r', '5');
    svgDoc.document Element.appendC hild(circle);
    xPosition = xPosition + 10;
    }


    --

    Martin Honnen

    Comment

    • Holger Jeromin

      #3
      Re: Adding SVG via Javascript in Explorer

      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

      Comment

      Working...