Seite wird zur Zeit überarbeitet

08. Juni 2017

SVG progress Bar dotted Lines

 <!doctype html>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
      var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
      svg.setAttribute('width', '200');
      svg.setAttribute('height', '200');
      svg.setAttribute("viewBox", "0 0 200 200"); 
      svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");

    var myLine=document.createElementNS("http://www.w3.org/2000/svg", "line");
      with(myLine){
        setAttribute("x1", "100");
        setAttribute("y1", "5");
        setAttribute("x2", "100");
        setAttribute("y2", "15");
        setAttribute("stroke", "#ccc");
        setAttribute("stroke-width", "2");
        setAttribute("transform", "rotate(0,100,100)");

      }
    var myNodes=[];
    var els=100;
    var step = 360/els;
    for (var i=0;i<els;i++){
      myNodes[i]=myLine.cloneNode(true);
      myNodes[i].setAttribute("transform", "rotate("+i*step+",100,100)");
      svg.appendChild(myNodes[i]);
    }

    //make 30% red;
    var percent=30;
    for (i=0;i<=percent;i++){
      myNodes[i].setAttribute("stroke", "#f00");
    }
    document.body.appendChild(svg);
    </script>
  </body>
  </html>


Frank Wisniewski Lohmühlenstraße 2 53518 Adenau
Telefon: 02691 / 548 E-Mail: info@w-web.de