Beispiel:SVG-cogwheel-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
 <title>Zahnräder mit stroke-dashoffset</title>

</head> <body>

<svg width="780" height="450" viewBox="0 0 260 150"> 

 <defs>
   <style type="text/css">
   circle {

fill: url(#gold); stroke: #772200; stroke-width: 18; 

   }
   </style>

<radialGradient id="gold"> <stop stop-color="orange" offset=".1"/> <stop stop-color="white" offset=".2" stop-opacity=".95"/> <stop stop-color="gold" offset=".7" stop-opacity=".75"/> <stop stop-color="#880" offset=".8" stop-opacity=".75"/> <stop stop-color="gold" offset=".95" stop-opacity=".75"/> <stop stop-color="white" offset=".97" stop-opacity=".75"/> <stop stop-color="orange" offset="1" stop-opacity=".75"/> </radialGradient> 

 </defs>
 
 <rect id="bar" x="65" y="65" rx="12" height="20" width="130" fill="purple" stroke="black" stroke-width="3"/>
 
 <circle cx="75" cy="75" r="50" stroke-dasharray="10,14">
   <animate attributeName="stroke-dashoffset" repeatCount="indefinite" values="24;1" dur=".5s"/>
 </circle>
 
 <circle cx="185" cy="75" r="50" stroke-dasharray="10,14">
   <animate attributeName="stroke-dashoffset" repeatCount="indefinite" values="8;32" dur=".5s"/>
 </circle>

</svg>

Quelle: <a href="http://cs.sru.edu/%7Eddailey/svg/2011/timing.html">Timing</a> von <a href="http://srufaculty.sru.edu/david.dailey/">David Dailey</a>, 2011

</body> </html>

Abgerufen am 4.01.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:SVG-cogwheel-1.html"