Untitled

<html>
    <head>
        <title>Analoge Uhr in SVG</title>
          <script>

              var svg_open = "<?xml version='1.0' ?><svg viewBox='0 0 300 300' width='300' height='300' xmlns='http://www.w3.org/2000/svg'>";
              var svg_stat = ""; //Ziffernblatt
              var svg_zeig = ""; //Zeiger
              var svg_end  = "</svg>";

              function zifferblatt()
                {

                    svg_stat="<rect x='0' y='0' width='300' height='300' fill='#00ffff' />";
                    svg_stat=svg_stat+"<circle cx='150' cy='150' r='140' fill='#ffffff' />";

                      var step= ( 3.14159 * 2 ) / 12;//2Pi durch 12
                      var cx = 0 ;
                      var cy = 0 ;
                      var zz ="";
                      var svg_point ="";

                        for (var i=0; i < 12; i++)// laufe von 0 bis 11 (12 Schritte)

                        {
                            cx=145 + Math.sin(i*step)*130;//x-pos auf Kreisbogen
                            cy=155 - Math.cos(i*step)*130;//y-pos auf Kreisbogen
                              //svg_point="<circle cx='"+cx+"' cy='"+cy+"' r='5' fill='#000000'/>"


                              zz=i;
                                if(i==0){zz=12;}
                                   svg_point="<text x='"+cx+"' y='"+cy+"' fill='#0000ff'>"+zz+"</text>";

                              svg_stat=svg_stat+svg_point;
                        }

                }

              function zeiger()
                  {
                    var zeit=new Date();
                      var sekunde = zeit.getSeconds();
                      var minute  = zeit.getMinutes();
                      var stunde  = zeit.getHours();
                        var step12  = ( 3.14159 * 2 ) / 12;//2Pi durch 12
                        var step60  = ( 3.14159 * 2 ) / 60;//2Pi durch 60
                        var px = 0;
                        var py = 0;

                        px = 150 + Math.sin(sekunde*step60)*130;
                        py = 150 - Math.cos(sekunde*step60)*130;

                        svg_zeig="<path d='M 150 150 L "+px+" "+py+"' stroke-width='1' stroke='#ff0000' />";

                        px = 150 + Math.sin((minute+sekunde/60)*step60)*100;
                        py = 150 - Math.cos((minute+sekunde/60)*step60)*100;

                        svg_zeig=svg_zeig+"<path d='M 150 150 L "+px+" "+py+"' stroke-width='3' stroke='#0000ff' />";

                        px = 150 + Math.sin((stunde+minute/60)*step12)*80;
                        py = 150 - Math.cos((stunde+minute/60)*step12)*80;

                        svg_zeig=svg_zeig+"<path d='M 150 150 L "+px+" "+py+"' stroke-width='5' stroke='#ffffff' />";

                        svg_zeig=svg_zeig+"<circle cx='150' cy='150' r='15' fill='#0000ff'/>";
                        svg_zeig=svg_zeig+"<circle cx='150' cy='150' r='12' fill='#ffffff'/>";
                  }


              function zeige_uhr()
                {
                    zeiger();
                    var svg=svg_open+svg_stat+svg_zeig+svg_end;// SVG zusammensetzen

                    svg=btoa (svg);//fertiges SVG nach base 64 codieren
                    document.getElementById('uhr').src="data:image/svg+xml;base64," +svg;//SVG an image übergeben

                }


          </script>
      <body>
         <hr>Analoge UHR in SVG<hr>
            <img src='' id='uhr' width='300' height='300'>
                <script>
                      zifferblatt();
                      zeige_uhr();
                      window.setInterval("zeige_uhr()",500);
                </script>


      </body>
    </head>

</html>