Mega Code Archive

 
Categories / XML / SVG
 

Dynamically Removing an SVG Element

<?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">     function remove(event)     {        var rectangle = event.target;        var parent    = rectangle.parentNode;        parent.removeChild(rectangle);     }   </script>   <g transform="translate(50,50)">      <text 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>