SVG/ Interaktivität

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="350" height="600">
<defs>
	<linearGradient id="verlauf1" x1="50%" x2="50%" y1="0%" y2="100%">
		<stop offset="0" stop-color="black"/>
		<stop offset="1" stop-color="white"/>
	</linearGradient>
	<linearGradient id="verlauf2" x1="50%" x2="50%" y1="0%" y2="100%">
		<stop offset="0" stop-color="red"/>
		<stop offset="1" stop-color="white"/>
	</linearGradient>
	<linearGradient id="verlaufHover" x1="50%" x2="50%" y1="0%" y2="100%">
		<stop offset="0" stop-color="lime"/>
		<stop offset="1" stop-color="white" />
	</linearGradient>
	<linearGradient x1="50%" x2="50%" y1="0%" y2="100%" id="verlauf3">
		<stop offset="0" stop-color="navy"/>
		<stop offset="2" stop-color="white"/>
	</linearGradient>
</defs>
<style type="text/css">
#r1{fill:url(#verlauf1)}
#r2{fill:url(#verlauf2)}
#r3{fill:url(#verlauf3)}
 
#r1:hover{fill:url(#verlauf2)}
#r2:hover{fill:url(#verlauf3)}
#r3:hover{fill:url(#verlauf1)}
</style>
<rect width="300" height="100" x="50" y="20" ry="10" rx="10" id="r1" />
<rect width="300" height="100" x="50" y="220" ry="10" rx="10" id="r2"/>
<rect width="300" height="100" x="50" y="420" ry="10" rx="10" id="r3"/>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<a xlink:href="http://www.de.wikipedia.org"> 
<circle cx="50" cy="50"  r="50" fill="red" />
</a>
</svg>