Animierte SVG Uhr mit JavaScript

Zur Navigation springen Zur Suche springen

Aufgrund von Sicherheitsbeschränkungen in der MediaWiki-Software ist es nicht möglich, dieses SVG hochzuladen, daher hier nur der Code und ein Ersatzbild.

Animierte SVG Uhr grau.png

SVG-Code

<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  viewBox="-500 -500 1274 1000" version="1.1"
  >
  <style type="text/css">
    <![CDATA[
    #shand {fill:LightSteelBlue ;stroke:#333 ;}
    #mhand {fill:LightSlateGray;stroke:#333 ;}
    #hhand {fill:#666;stroke:#333 ;}
    .slowfo {fill:lime;stroke:DarkSlateGray ;}
    .sitext { fill: #666}
    text { font-size: 30}
  ]]>
  </style>
  <defs>
    <radialGradient id="rg1">
      <stop offset="0%" stop-color="#aaa" />
      <stop offset="100%" stop-color="#333" />
    </radialGradient>
    <line id="li" y1="98" y2="116" stroke="#999" stroke-width="5" />
    <line id="t" y1="103" y2="116" stroke="#aaa" stroke-width="3" />
    <g id="m">
      <use xlink:href="#li" />
      <use xlink:href="#t" transform="rotate(6)" />
      <use xlink:href="#t" transform="rotate(12)" />
      <use xlink:href="#t" transform="rotate(18)" />
      <use xlink:href="#t" transform="rotate(24)" />
    </g>
    <g id="n">
      <use xlink:href="#m" />
      <use xlink:href="#m" transform="rotate(30)" />
      <use xlink:href="#m" transform="rotate(60)" />
    </g>
    <linearGradient id="lg" x1="0" x2="1" y2="1">
      <stop offset="0" stop-color="#333" />
      <stop offset="1" stop-color="#aaa"  />
    </linearGradient>
    <linearGradient id="lgb" x1="0" x2="1" y2="1" >
      <stop offset="0" stop-color="#aaa" />
      <stop offset="1" stop-color="#333" />
    </linearGradient>
    <linearGradient id="l2" x1="1" x2="0" y1="1" y2="0" >
      <stop offset="0" stop-color="#333" />
      <stop offset="1" stop-color="#aaa"  />
    </linearGradient>
    <g id="button" transform="scale(0.3)" >
      <circle r="100" fill="url(#lg)" transform="rotate(135)"
   stroke="url(#lgb)" stroke-width="6"/>
      <circle r="80" fill="url(#lg)" transform="rotate(315)"
   stroke="none" />
    </g>
  </defs>
  <script type="application/x-javascript">
    <![CDATA[
      window.addEventListener("load",init);
      var frame = 0; 
      
      var a1;
      var a2;
      var a3;
      
      function init()
      {
        a1 = document.getElementById("a1");
        a2 = document.getElementById("a2");
        a3 = document.getElementById("a3");

        setClock();
      }
      
      function setClock()
      {
        var dt = new Date();
        
        var hours = dt.getHours() % 12;
        var min = dt.getMinutes();
        var sec = dt.getSeconds();

        a1.endElement();
        var deg = Math.round(30*(hours + min/60)*100)/100;
        a1.setAttribute("values",deg+";"+Number(deg+360));
        a1.beginElement();

        a2.endElement();
        deg = Math.round(6*(min + sec/60)*100)/100;
        a2.setAttribute("values",deg+";"+Number(deg+360));
        a2.beginElement();
        
        a3.endElement();
        deg = 6*sec;
        a3.setAttribute("values",deg+";"+Number(deg+360));
        a3.beginElement();
      
      }
  ]]>
  </script>
  <g transform="scale(3.9)">
    <use xlink:href="#n" />
    <use xlink:href="#n" transform="rotate(90)" />
    <use xlink:href="#n" transform="rotate(180)" />
    <use xlink:href="#n" transform="rotate(270)" />
  </g>
  <g id="hhand" opacity="1" transform="rotate(0)">
    <path transform="scale(1.8) rotate(0)" d="m-20 0 L0 40 20 0 0 -170 z" stroke-width="0.5" >
      <desc>Stundenzeiger hour hands </desc>
    </path>
    <animateTransform attributeName="transform" id="a1" 
    type="rotate" values="0; 360 "
    repeatDur="indefinite" dur="43200s"
    end="freeze.click;"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="slf.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slb.click;curr.click;"
    repeatDur="indefinite" dur="720s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="ff.click;" end="reset.click;freeze.click;set.click;slf.click;fb.click;slb.click;curr.click;"
    repeatDur="indefinite" dur="72s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="slb.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slf.click;curr.click;"
    repeatDur="indefinite" dur="720s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="fb.click;" end="reset.click;freeze.click;set.click;ff.click;slb.click;slb.click;curr.click;"
    repeatDur="indefinite" dur="72s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="reset.click;" end="freeze.click"
    repeatDur="indefinite" dur="43200s"
    additive="replace" fill="freeze" />
  </g>
  <g id="mhand" opacity="1" transform="rotate(0)">
    <path transform="scale(1.8)" d="M-20 0 L0 40 20 0 0 -200 z" stroke-width="0.5" >
      <desc> Minutenzeiger minute hands </desc>
    </path>
    <animateTransform attributeName="transform" id="a2" 
    type="rotate" values="0; 360 "
    repeatDur="indefinite" dur="3600s"
    end="freeze.click;"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="slf.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slb.click;curr.click;"
    repeatDur="indefinite" dur="60s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="ff.click;" end="reset.click;freeze.click;set.click;slf.click;fb.click;slb.click;curr.click;"
    repeatDur="indefinite" dur="6s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="slb.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slf.click;curr.click;"
    repeatDur="indefinite" dur="60s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="fb.click;" end="reset.click;freeze.click;set.click;ff.click;slb.click;slb.click;curr.click;"
    repeatDur="indefinite" dur="6s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="reset.click;" end="freeze.click"
    repeatDur="indefinite" dur="3600s"
    additive="replace" fill="freeze" />
  </g>
  <g id="shand" opacity="1" transform="rotate(0)">
    <path transform="scale(1.7) rotate(0)" d="M-3 0 L0 40 3 0 0 -270 z" stroke-width="0.5" >
      <desc> Minutenzeiger minute hands </desc>
    </path>
    <animateTransform attributeName="transform" id="a3" 
    type="rotate" values="0; 360 "
    repeatDur="indefinite" dur="60s"
    end="freeze.click;"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="slf.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slb.click;curr.click"
    repeatDur="indefinite" dur="1s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="ff.click;" end="reset.click;freeze.click;set.click;slf.click;fb.click;slb.click;curr.click"
    repeatDur="indefinite" dur="0.1s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="slb.click;" end="reset.click;freeze.click;set.click;ff.click;fb.click;slf.click;curr.click;"
    repeatDur="indefinite" dur="1s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;-360"
    begin="fb.click;" end="reset.click;freeze.click;set.click;ff.click;slb.click;slb.click;curr.click;"
    repeatDur="indefinite" dur="0.1s"
    additive="sum" fill="freeze" />
    <animateTransform attributeName="transform"
    type="rotate" values="0;360"
    begin="reset.click;" end="freeze.click"
    repeatDur="indefinite" dur="60s"
    additive="replace" fill="freeze" />
    <animate attributeName="opacity"
    values="0"
    end="reset.click;freeze.click;set.click;curr.click;" begin="ff.click;slf.click;fb.click;slb.click;"
    repeatDur="indefinite"
    additive="replace" fill="freeze" >
      <desc>hide seconds hands</desc>
    </animate>
    <animate attributeName="opacity"
    values="1"
    begin="reset.click;freeze.click;set.click;curr.click;"
    repeatDur="indefinite"
    additive="replace" fill="freeze" />
  </g>
  <circle r="12" fill="url(#rg1)" stroke="purple" stroke-width="0.5" />
  <g transform="translate(550,-250)" >
    <use xlink:href="#button" y="-100" id="curr" onclick="setClock()" />
    <text x="50" dy="-100" font-size="30" class="sitext" onclick="alert('You have clicked the text »current time«')">current time
    
      
      <tspan dy="30" x="50" font-size="16">(JavaScript; click reset first)</tspan>
    </text>
    <use xlink:href="#button" id="reset" />
    <text class="sitext" x="50" font-size="30" >reset time
      
      
      <tspan x="50" dy="30" font-size="16" fill="#fff" >small text</tspan>
    </text>
    <g id="slf">
      <use xlink:href="#button" y="100" />
    </g>
    <text class="sitext" dy="100" x="50" font-size="30" >slow forward
      
      <tspan x="50" dy="30" font-size="16">(hides seconds hand)</tspan>
    </text>
    <g id="ff">
      <use xlink:href="#button" y="200" />
    </g>
    <text class="sitext" dy="200" x="50" font-size="30" >fast forward
      
      <tspan x="50" dy="30" font-size="16">(hides seconds hand)</tspan>
    </text>
    <g id="slb" >
      <use xlink:href="#button" y="300" />
    </g>
    <text class="sitext" dy="300" x="50" font-size="30">slow backward
       
      <tspan x="50" dy="30" font-size="16">(hides seconds hand)</tspan>
    </text>
    <g id="fb" >
      <use xlink:href="#button" y="400" />
    </g>
    <text class="sitext" dy="400" x="50" font-size="30" >fast backward
      
      <tspan x="50" dy="30" font-size="16">(hides seconds hand)</tspan>
    </text>
    <use xlink:href="#button" y="500" id="set" />
    <text dy="500" class="sitext" x="50" font-size="30" >set time</text>
    <use xlink:href="#button" y="600" id="freeze" />
    <text dy="600" class="sitext" x="50" font-size="30" >freeze time</text>
  </g>
</svg>