Seite wird zur Zeit überarbeitet

08. Juni 2017

simple SVG Chart

  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>svgPercent</title>
  </head>
  <body>
    <svg width="200" height="200" viewBox="0 0 200 200">
      <path id="arc1" fill="none" stroke="#ddd" stroke-width="20" stroke-linecap="round"/>
          <path id="arc2" fill="none" stroke="#00f" stroke-width="20" stroke-linecap="round"/>
      <text x="50%" y="40%"
          font-family="Arial"
          font-weight="bold"
          font-size="50"
          alignment-baseline="middle" text-anchor="middle">75</text> 
      <text x="50%" y="60%"
          font-family="Arial"
          font-weight="bold"
          font-size="16"
          alignment-baseline="middle" text-anchor="middle">73 (+2%)</text> 
      <line x1="100" y1="150" x2="100" y2="180" style="stroke:rgb(255,0,0);
                stroke-width:5" stroke-linecap="round"/>        
          <line x1="100" y1="150" x2="105" y2="155" style="stroke:rgb(255,0,0);
                stroke-width:5" stroke-linecap="round"/>    
         <line x1="100" y1="150" x2="95" y2="155" style="stroke:rgb(255,0,0);
                stroke-width:5" stroke-linecap="round"/>    
    </svg>
    <script>
    function polarToCartesian(centerX, centerY, radius, angleInDegrees) {
    var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;

    return {
      x: centerX + (radius * Math.cos(angleInRadians)),
      y: centerY + (radius * Math.sin(angleInRadians))
    };
  }

  function describeArc(x, y, radius, startAngle, endAngle){

      var start = polarToCartesian(x, y, radius, endAngle);
      var end = polarToCartesian(x, y, radius, startAngle);

      var largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1";

      var d = [
          "M", start.x, start.y, 
          "A", radius, radius, 0, largeArcFlag, 0, end.x, end.y
      ].join(" ");

      return d;       
  }
  document.getElementById("arc1").setAttribute("d", describeArc(100, 100, 90, 210, 510));
  document.getElementById("arc2").setAttribute("d", describeArc(100, 100, 90, 210, 360));
    </script>
  </body>
  </html>


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