SVG Ring/Donut zeichnen

Du willst mit Javascript und SVG ein Ring bzw. ein Donut zeichnen, also ein Kreis der innen hohl ist?
So wird es gemacht:

  1. /**
  2.   * SVG Donut Object
  3.   */
  4. var oDonut = function(x, y, r, R) {
  5. var y1 = y+R;
  6. var y2 = y+r;
  7. var path = 'M'+x+' '+y1+ 'A'+R+' '+R+' 0 1 1 '+(x+0.001)+' '+y1; // Outer circle
  8. path += 'M'+x+' '+y2+ 'A'+r+' '+r+' 0 1 0 '+(x-0.001)+' '+y2; // Inner Circle
  9. var c = document.createElementNS('http://www.w3.org/2000/svg', 'path:path');
  10. c.setAttributeNS(null, 'd', path);
  11. return c;
  12. };

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Zulässige HTML-Tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <php>
  • Zeilen und Absätze werden automatisch erzeugt.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <drupal>, <js>, <php>, <vb>. PHP-Quellcode kann in <?php ... ?> or <% ... %> eingeschlossen werden.
  • Verlinkte Bilder mit dem 'rel="lightbox"' in <a> Tags wird die Lighbox aufrufen, wenn darauf geklickt wurde.

Weitere Informationen über Formatierungsoptionen

Mit dem Absenden dieses Formulars, akzeptieren Sie die Datenschutzrichtlinie von Mollom.