XML/SVG/set

Handling Mouse-Over Events

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%">

   <g transform="translate(100,100)">
       <rect
          x="0" y="0" width="200" height="100"
          style="fill:red;stroke:blue;stroke-width:4;">
          <set begin="mouseover" end="mouseout"
           attributeName="fill" from="#FF0000" to="#FFFF00"/>
       </rect>
   </g>

</svg>

</source>
   
  

Hiding Rectangles

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%">

   <g transform="translate(100,100)">
       <rect
          x="0" y="0" width="200" height="100"
          style="fill:red;stroke:blue;stroke-width:4;">
              <set begin="mouseover" end="mouseout"
               attributeName="fill" from="#FF0000" to="#000000"/>
              <set attributeName="visibility" attributeType="XML"
               to="hidden" begin="1s" dur="3s"/>
       </rect>
   </g>

</svg>

</source>
   
  

Mouse Clicks and Gradient Colors

   <source lang="xml">

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"

"http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg width="100%" height="100%">

   <defs>
      <animateColor
         id="circleGradient1"
         xlink:href="#shape"
         attributeName="fill"
         values="rgb(255,0,0);rgb(0,255,255);
                 rgb(0,128,151);rgb(255,0,0)"
         dur="3s" begin="indefinite"/>
   </defs>
   
   <a xlink:href="#circleGradient1">
       <circle id="shape"
               cx="100" cy="100" r="50"
               style="fill:rgb(255,255,0)"/>
   </a>

</svg>

</source>