Depot43-Unterlagen

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>SVG-Animation - SVG hover</title>
    <style>
	svg {
		max-width:400px;
	}
	#KreisAussen {
		stroke:blue;
  		stroke-width:6 ;
		fill: red;
	}
	#KreisAussen:hover {
		opacity:0.5
	}
	#KreisInnen {
	    	stroke:white;
  		stroke-width:12 ;
		fill: blue;
	}
	#KreisInnen:hover {
	    	stroke:black;
  		stroke-width:24 ;
		fill: white;
		cursor:pointer;
	}
    </style>
</head>
    <body>
	<svg width="100%" height="100%" viewbox="0 0 224 226" version="1.1"> 
			<circle id="KreisAussen" cx="113.905" cy="111.538" r="100"></circle>  
			<circle id="KreisInnen" cx="111.982" cy="111.538" r="54.504"></circle>   
	</svg>
    </body>
</html>


 

            

Hinweis

Die Pseudoelemente "hover" oder "focus" können in den CSS-Angaben hinterlegt werden. Dies ist einfacher, wenn das gewünschte Element mit eigener ID versehen wurde.