Refeering to new created SVG element using ECMAscipt

Discussion in 'Web Design, HTML And CSS' started by rjblok, May 9, 2007.

  1. rjblok

    rjblok New Member

    Joined:
    May 9, 2007
    Messages:
    1
    Likes Received:
    0
    Trophy Points:
    0
    Dear all,

    I have used ECMAscript to add a SVG element to a webpage (I added a mouseover event to an existing svg element and the function it refers to creates a rectangle;
    Code:
    function bla (evt) {
          var svgNS = "http://www.w3.org/2000/svg";
          var vierkant = document.createElementNS(svgNS,"rect");
          rect1.setAttributeNS(null,"width",400); 
          rect1.setAttributeNS(null,"height",80);
          rect1.setAttributeNS(null,"x",100);
          rect1.setAttributeNS(null,"y",100);
          rect1.setAttributeNS(null,"rx",20); 
          rect1.setAttributeNS(null,"ry",20);
          rect1.setAttributeNS(null,"id","textblock");
          rect1.setAttributeNS(null,"visability","true");
          rect1.setAttributeNS(null,"stroke","black");              
          rect1.setAttributeNS(null,"fill","blue");
          rect1.setAttributeNS(null,"fill-opacity",0.2);
          document.getElementById("firstgroup").appendChild(rect1);
    }
    So far so good. But now I want to be able to click yet another element for this same rectangle to dissapear (be removed). Unfortunately, I did not find any possibilities to refer to this newly created rectangle. I added an id, but getElementByID does not seem to find it. I was hoping...

    var test = svgDocument.getElementById("textblock");
    test.parentNode.removeChild;

    ...would do the trick, but it doesn't.

    Any ideas?

    Robert
     
    Last edited by a moderator: May 9, 2007

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice