<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
         "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- ========================================================================= -->
<!-- SVG Sample : Scripting                                                    -->
<!--                                                                           -->
<!--                                                                           -->
<!-- @author        Vincent Hardy                                              -->
<!--                XML Technology Center, Sun Microsystems Inc.               -->
<!-- @version       1.0, July 24 2000                                          -->
<!--                                                                           -->
<!-- Copyright Sun Microsystems Inc., 2000-2002                                -->
<!-- ========================================================================= -->

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="480" height="240" onload="onload(evt)">
	<defs>
		<!-- ============================= -->
		<!-- SVG Text, defined as a Shape  -->
		<!-- ============================= --> 
		<g id="SVG_Text" style="fill-rule:nonzero;" transform="translate(-86.25, -54.25)">
			<desc>SVG Text defined as a path element</desc>
			<g transform="scale(.5, .5)">
      
      <!-- "S" -->
			<path id="SVG_S" d="M87.469,7c0.781,2.656,1.488,6.684,2.117,12.074C90.527,27.121,91,33.375,91,37.828c0,1.406-0.156,2.93-0.469,4.57l-1.176,0.352l-8.449-0.586L79.5,41.926c-3.453-10.336-6.906-17.344-10.359-21.027C63.176,14.633,56.152,11.5,48.07,11.5
			c-7.691,0-13.793,2.016-18.305,6.043C25.254,21.574,23,26.559,23,32.5c0,5.008,2.219,9.82,6.664,14.434c4.363,4.617,13.691,9.004,27.988,13.16c4.789,1.387,10.582,3.621,17.375,6.699c6.793,3.082,11.941,6.469,15.449,10.156c4.676,4.871,7.891,9.563,9.645,14.078
			c1.75,4.516,2.629,10.148,2.629,16.898c0,7.383-1.375,14.648-4.117,21.793c-1.492,3.77-3.887,7.344-7.18,10.719c-2.352,2.355-6,5.121-10.941,8.301c-4.945,3.18-10.063,5.477-15.355,6.891c-5.297,1.414-12.102,2.121-20.414,2.121
			c-5.492,0-12.043-0.793-19.652-2.375l-14.117-4.156c-3.922-1.109-6.395-2.098-7.414-2.969c-0.395-0.313-0.746-1.051-1.059-2.223v-1.289c0-0.859-0.18-6.203-0.535-16.035c-0.145-5.07-0.215-8.66-0.215-10.77v-4.449l11-0.234c3.758,8.699,6.184,13.949,7.281,15.75
			c2.426,4,5.105,7.23,8.043,9.699s6.441,4.43,10.512,5.879s8.496,2.172,13.273,2.172c4.227,0,8.887-0.898,13.977-2.699s9.18-4.758,12.273-8.867s4.641-8.516,4.641-13.215c0-5.789-2.727-11.152-8.176-16.086c-3.32-3.055-12.188-7.125-26.609-12.215
			s-24.414-9.629-29.977-13.621c-5.566-3.992-9.957-9.332-13.168-16.023C1.605,57.336,0,50.898,0,44.719c0-12.441,4.473-23.004,13.418-31.691C22.363,4.344,35.551,0,52.977,0c3.766,0,9.336,0.672,16.715,2.016C74.164,2.809,80.09,4.469,87.469,7z"/>

		<!-- "V" -->
		<path id="SVG_V" d="M162.837,159L105.165,37.988L118.657,34l44.18,94.328L207.138,34l13.277,3.52L162.837,159z"/>

		<!-- "G" -->
		<path id="SVG_G" d="M271.21,122.664c-2.629-1.059-4.727-2.43-6.297-4.117c-1.57-1.684-3.02-4.055-4.352-7.113c-0.945-1.961-1.531-4.273-1.766-6.938c-0.551-6.27-0.824-10.465-0.824-12.582c0-7.758,1.547-13.953,4.648-18.578c3.098-4.625,6.531-7.293,10.297-7.996
			c3.375-0.391,5.453-0.59,6.238-0.59c6.039,0,10.727,2.156,14.063,6.469s5.004,12.738,5.004,25.281c0,9.484-1.863,16.48-5.59,20.988s-8.219,6.762-13.477,6.762c-2.668,0-5.316-0.527-7.945-1.586z M226.007,182.211c-3.023,3.004-4.535,6.426-4.535,10.254
			c0,3.906,1.801,7.582,5.41,11.023c4.703,4.609,11.195,7.93,19.469,9.965c8.273,2.027,17.629,3.047,28.063,3.047c9.645,0,18.684-1.098,27.117-3.285c8.43-2.195,14.883-4.68,19.352-7.457c4.469-2.781,8.02-6.383,10.648-10.801c2.625-4.426,3.941-8.945,3.941-13.563
			c0-8.609-3.727-15.891-11.18-21.84c-7.531-5.949-20.676-8.926-39.426-8.926c-0.941,0-2.078,0.043-3.41,0.121c-4.711,0.234-7.496,0.352-8.359,0.352c-6.906,0-12.438-0.156-16.594-0.469c-1.098-0.234-1.961-0.391-2.586-0.469c-3.219-0.469-5.516-1.324-6.887-2.574
			c-1.375-1.246-2.059-2.648-2.059-4.211c0-1.715,0.672-3.199,2.023-4.449c2.695-2.57,7.41-5.691,14.152-9.359c4.941,1.082,8.785,1.777,11.531,2.082c1.883,0.234,5.41,0.348,10.59,0.348c8.078,0,16.16-2.148,24.242-6.445c5.805-3.047,10.371-7.164,13.707-12.359
			s5.004-10.645,5.004-16.348c0-4.84-0.941-9.957-2.816-15.348c3.172,0.156,7.395,1.445,12.66,3.863c2.242,1.094,3.598,1.637,4.063,1.637c1.238,0,2.438-0.844,3.602-2.535c1.16-1.688,1.742-4.695,1.742-9.023c0-4.953-0.465-8.098-1.387-9.434
			C343.159,64.672,341.929,64,340.39,64c-2.078,0-4.543,0.441-7.391,1.316c-4.082,1.438-9.434,2.832-16.055,4.184c-2.992-2.68-6.492-5.277-10.5-7.801l-4.484-1.652c-3.855-1.418-6.609-2.285-8.258-2.602c-3.543-0.629-7.75-0.945-12.625-0.945
			c-12.117,0-22.008,1.98-29.676,5.938c-7.672,3.961-13.707,9.938-18.113,17.93c-2.047,5.563-3.066,10.813-3.066,15.75c0,5.488,1.871,11.055,5.621,16.695c2.887,4.313,8.195,8.777,15.926,13.402c-15.273,8.68-23.848,13.957-25.727,15.832
			c-1.883,1.875-2.82,4.574-2.82,8.09c0,4.379,1.758,8.344,5.281,11.902c3.52,3.555,10.559,6.664,21.121,9.324c-12.723,4.219-20.594,7.836-23.617,10.848z M277.187,209c-6.609,0-12.789-0.781-18.531-2.344c-5.746-1.563-9.84-3.691-12.277-6.387
			s-3.656-5.41-3.656-8.145c0-5.156,2.184-9.301,6.551-12.422c4.367-3.129,12.922-4.691,25.672-4.691l14.52,0.238c6.609,0,11.918,0.391,15.934,1.172c2.832,0.625,5.371,1.738,7.613,3.34s3.793,3.223,4.66,4.863s1.301,3.32,1.301,5.039
			c0,3.125-2.047,6.289-6.137,9.492c-6.453,4.922-15.504,8.047-27.148,9.375c-3.781,0.313-6.613,0.469-8.5,0.469z"/>
			</g>
		</g> <!-- SVG_text -->

		<!-- ================================== -->
		<!-- Define Background Gradient         -->
		<!-- ================================== -->
		<radialGradient id="backgroundGradient" cx="0" cy="0" r="300" gradientUnits="userSpaceOnUse">
			<stop offset="0%" style="stop-color:white" />
			<stop offset="20%" style="stop-color:rgb(103, 103, 152)" />
			<stop offset="50%" style="stop-color:black" />
			<stop offset="80%" style="stop-color:rgb(103, 103, 152)" />
			<stop offset="100%" style="stop-color:white" />
		</radialGradient>
	</defs>

	<script type="text/ecmascript">
		<![CDATA[
		var doc;

		function onload(evt){
			var target = evt.target;
			doc = target.ownerDocument;
		}

    function setColor(evt, id, color) {
		// Get element over which event happened
		var element = document.getElementById(id);
		element.setAttribute('style', 'fill:' + color);
    }

		function setLegend(legend, visibility){
			var legendNode = document.getElementById(legend + 'Legend');
			legendNode.setAttribute('style', 'visibility:' + visibility);
		}
		
		]]>
	</script>

	<rect width="240" height="120" style="fill:url(#backgroundGradient)" />

	<g transform="translate(120, 60)">

		<g transform="translate(-86.25, -54.25) scale(.5, .5)">
			<use id="whiteS" xlink:href="#SVG_S"
			 onmouseover="setColor(evt, 'whiteS', 'rgb(176, 22, 40)'); setLegend('Scalable', 'visible');" 
			 onmouseout="setColor(evt, 'whiteS', 'white'); setLegend('Scalable', 'hidden');" 
			 style="fill:white"/>
			<use id="whiteV" xlink:href="#SVG_V"
			 onmouseover="setColor(evt, 'whiteV', 'rgb(176, 22, 40)'); setLegend('Vector', 'visible');" 
			 onmouseout="setColor(evt, 'whiteV', 'white'); setLegend('Vector', 'hidden');" 
			 style="fill:white" />
			<a xlink:href="http://www.sun.com" target="Sun's web site"><use id="whiteG" xlink:href="#SVG_G"
			 onmouseover="setColor(evt, 'whiteG', 'rgb(176, 22, 40)'); setLegend('Graphics', 'visible');" 
			 onmouseout="setColor(evt, 'whiteG', 'white'); setLegend('Graphics', 'hidden')" 
			 style="fill:white"/></a>
		</g>

     <animateTransform attributeName="transform" type="rotate" values="0;160;60;220;0" additive="sum" dur="12s"
	 begin="whiteS.click"/>
     <animateTransform begin="whiteS.click" attributeName="transform" type="scale"  values="1 1;0.25 0.25; 1 1"
	   additive="sum" dur="12s" />

	</g>

	<g transform="translate(5, 115)"
	 style="fill:rgb(176, 22, 40); font-family:Verdana; font-size:1em; font-weight:bold">
		<text id="ScalableLegend" style="visibility:hidden">Scalable</text>
		<text id="VectorLegend" style="visibility:hidden">Vector</text>
		<text id="GraphicsLegend" style="visibility:hidden">Graphics</text>
	</g>

	<text x="5" y="140" style="fill:white; font-family:Verdana; font-size:10pt;"
	>
		<tspan>This example illustrates scripting and linking.</tspan>
		<tspan x="5" dy="14">If you move the mouse over one of the 'S', 'V' or 'G'</tspan>
		<tspan x="5" dy="14">letters, the given letter turns red and a description</tspan>
		<tspan x="5" dy="14">text appears in the bottom left of the diagram.</tspan>
		<tspan x="5" dy="14">Finally, the example illustrates scription: if you </tspan>
		<tspan x="5" dy="14">click on the letter 'G', a window will </tspan>
		<tspan x="5" dy="14">open on www.sun.com.</tspan>
		<tspan x="5" dy="14">It also shows how events can be linked to animation:</tspan>
		<tspan x="5" dy="14">if you click on the letter 'S', an animation will start.</tspan>


	</text>

</svg>
