XML/SVG/JavaScript

Adding an SVG Element via ECMAScript

   <source lang="xml">

<?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>
</source>
   
  

Determining Attribute Values of SVG Elements

   <source lang="xml">

<?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>

</source>
   
  

Dynamically Removing an SVG Element

   <source lang="xml">

<?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>

</source>
   
  

Mouse Clicks and Resizing Circles

   <source lang="xml">

<?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>

</source>
   
  

Mouse Clicks and Scaled Ellipses

   <source lang="xml">

<?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>

</source>