#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2002
    Posts
    40
    Rep Power
    13

    SVG: Trouble reusing shape using dom/javascript


    Hi everyone,

    I'm trying to get the following code to word -

    Code:
    <?xml version="1.0" standalone="no" ?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 
    20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-
    20010904/DTD/svg10.dtd">
    <svg id="mainmap" xml:space="preserve" style="shape-
    rendering:geometricPrecision; text-rendering:geometricPrecision; 
    image-rendering:optimizeQuality"
    
    onload="init(evt)" width="200" height="200">
    
    <script type="text/ecmascript"> <![CDATA[
    
    function init(evt){
    
    defs = document.createElement("defs");
    
    var SVGRoot = document.getDocumentElement();
    
    shape = document.createElement("circle");
    
    shape.setAttribute("cx", 50);
    shape.setAttribute("cy", 50);
    shape.setAttribute("r", 30);
    shape.setAttribute("style", "fill: green");
    
    defs.appendChild(shape);
    
    var use = document.createElement("use");
    use.setAttributeNS
    ("http://www.w3.org/2002/xlink/namespace", "xlink:href", "#shape");
    SVGRoot.appendChild(use);
    
    }
    
    ]]> </script>
    
    </svg>
    If I change the line defs.appendChild(shape); to SVGRoot.appendChild
    (shape); it works, but I want to be able to reuse the circle....what
    am I doing wrong?

    Thank You,

    Barry.
  2. #2
  3. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    15
    shape.setAttribute('id', 'shape');


    You use #shape as the fragment identifier, yet your shape node has no id to reference it by


    [EDIT]
    Also, your defs element has no ownerDocument, i.e. it does not exist in the document's dom. Be sure to append that as well.
    Last edited by jkd; August 19th, 2002 at 04:07 PM.
    Jason Contact Me
    Super moderator @ CodingForums

IMN logo majestic logo threadwatch logo seochat tools logo