Depot43-Unterlagen - SVG CSS und JS animation

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
  <meta charset=utf-8>
  <title>SVG-Animation - SVG  CSS und JS animation</title>
    <style>
	svg {
		max-width:400px;
	}
	#KreisAussen {
		stroke:blue;
  		stroke-width:6 ;
		fill: red;
	}
	#KreisInnen {
	    	stroke:white;
  		stroke-width:10 ;
		fill: blue;
		animation: go 15s infinite;
	}
	@keyframes go {
		0%   {stroke-width:10 ;}
		50% {stroke-width:250 ;}
		100% {stroke-width:10 ;}
	}
    </style>
</head>
    <body>
	<svg width="100%" height="100%" viewbox="0 0 224 226" version="1.1"> 
		<circle id="KreisAussen" cx="111" cy="111" r="100"></circle>  
		<circle id="KreisInnen" cx="111" cy="111" r="50"></circle>    
	</svg> 
    </body>
</html>


 

            

Hinweis

Mit CSS können die in der SVG-Datei genutzten Elemente angesprochen werden.