XML/SVG/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>

Determining Attribute Values of SVG Elements

<?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 showAttributes(event){
       var msg = "";
       var theRect   = event.target;
       var theParent = theRect.parentNode;
       var theID     = theRect.getAttribute("id");
       var xPosition = theRect.getAttribute("x");
       var yPosition = theRect.getAttribute("y");
       var theWidth  = theRect.getAttribute("width");
       var theHeight = theRect.getAttribute("height");
       msg += "Rectangle ID: " + theID     + "\n";
       msg += "x coordinate: " + xPosition + "\n";
       msg += "y coordinate: " + yPosition + "\n";
       msg += "width:        " + theWidth  + "\n";
       msg += "height:       " + theHeight + "\n";
       alert(msg);
    }
  </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 id="rect1" fill="red"
           onclick="showAttributes(evt)"
           x="10" y="10" width="200" height="100"/>
  </g>
</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>

Mouse Clicks and Resizing Circles

<?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">
  <desc>Capture mouse click events</desc>
  <script type="text/ecmascript"> 
    function mouseClick1(evt)
    {
       var circle = evt.target;
       var currentRadius = circle.getAttribute("r");
       if(currentRadius == 50)
       {
          circle.setAttribute("r", currentRadius*2);
          circle.setAttribute("fill", "#FF0000");
       }else{
          circle.setAttribute("r", currentRadius*0.5);
          circle.setAttribute("fill", "#FFFF00");
       }
    }
  </script>
        <g transform="translate(50,40)">
           <text x="0" y="0" font-size="30">
             Click inside the circle
           </text>
        </g>
        <g transform="translate(20,90)">
           <rect x="0" y="0" width="500" height="300"
                 fill="#CCCCCC" stroke="blue"/>
           <circle onclick="mouseClick1(evt)"
                   cx="250" cy="150" r="50" fill="blue"/>
        </g>
</svg>

Mouse Clicks and Scaled Ellipses

<?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">
  <script type="text/ecmascript">
    function mouseClick1(event)
    {
       var ellipse = event.target;
       var currentXRadius = ellipse.getAttribute("rx");
       if(currentXRadius == 120)
       {
          ellipse.setAttribute("rx", currentXRadius*2);
          ellipse.setAttribute("fill", "#FF0000");
       }
       else
       {
          ellipse.setAttribute("rx", currentXRadius*0.5);
          ellipse.setAttribute("fill", "#FFFF00");
       }
    }
  </script>
  <g transform="translate(20,50)">
     <text x="0" y="0" font-size="30">
       Click on the moving ellipse
     </text>
  </g>
  <g transform="translate(50,100)">
     <rect x="0" y="0" width="500" height="400"
           fill="#CCCCCC" stroke="blue"/>
     <ellipse onclick="mouseClick1(evt)"
              cx="250" cy="200" rx="120" ry="60"
              fill="blue">
             <animateTransform attributeName="transform"
                               attributeType="XML"
                               type="scale"
                               from="0" to="1"
                               begin="0s" dur="4s"/>
     </ellipse>
  </g>
</svg>