Adding an SVG Element via ECMAScript : JavaScript « SVG « XML

1. XML
2. SVG
3. JavaScript

Adding an SVG Element via ECMAScript

<?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 width="100%" height="100%"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <script type="text/ecmascript">
    var rectNode = null;
    var parent   = null;
    var svgDocument = null;

    function remove(event)
    {
       rectNode = event.target;
       parent   = rectNode.parentNode;
       parent.removeChild(rectNode);

       svgDocument = parent.getOwnerDocument();

       circleNode = svgDocument.createElement("circle");

       circleNode.setAttribute("style","fill:blue");
       circleNode.setAttribute("cx", "100");
       circleNode.setAttribute("cy", "100");
       circleNode.setAttribute("r",  "100");

       parent.appendChild(circleNode);
    }

  </script>

  <g transform="translate(50,50)">
     <text id="text1" font-size="24" fill="blue">
       Click inside the rectangle:
     </text>
  </g>

  <g transform="translate(50,100)">
     <rect onclick="remove(evt)" fill="red"
           x="0" y="0" width="200" height="100"/>
  </g>
 </svg>

 

Related examples in the same category