Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 4   

4.3 Ellipsen - das ellipse-Element

Bei einer Ellipse müssen, außer der x,y-Koordinate des Mittelpunkts, zwei Radien festgelegt werden. Den Radius der x-Achse und den Radius der y-Achse der Ellipse.

Folgende Attribute stehen dem ellipse-Element für diese Angaben zur Verfügung: cx und cy zur Bestimmung der Mittelpunktkoordinate (wie beim circle-Element) und rx für den x-Radius, sowie ry für den y-Radius.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="410" height="210" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>das ellipse-Element</title>
  <desc>4 Ellipsen und ein Kreis</desc>
  <!-- 4 farbige Ellipsen -->
  <ellipse cx="200" cy="50" rx="20" ry="40"
    style="fill:green;" />
  <ellipse cx="250" cy="100" rx="40" ry="20"
    style="fill:blue;" />
  <ellipse cx="200" cy="150" rx="20" ry="40"
    style="fill:yellow;" />
  <ellipse cx="150" cy="100" rx="40" ry="20"
    style="fill:red;" />

  <!-- der Kreis in der Mitte -->
  <circle cx="200" cy="100" r="19"
    style="fill:black; stroke:white; stroke-width:3px" />
</svg>
      



index  |  Kapitel 4  |  4.2  <<  | 4.3 |  >>  4.4   Linien - das line-Element