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

SVG Tutorial

  svg tutorial index  |  Kapitel 4   

4.2 Kreise - das circle-Element

Um Kreise konstruieren bzw. am Bildschirm darstellen zu können, benötigt die anzeigende Applikation, die x,y-Koordinate des Kreismittelpunkts und die Länge des Radius.
Für die Festlegung des x,y-Koordinate stellt das circle-Element die Attribute cx und cy zur Verfügung, der Radius wird mit dem Attribut r bestimmt.

Beachten Sie, dass Elemente, die später im SVG-Quellcode definiert werden, zuerst festgelegt Elemente überdecken. Dies gilt für alle Elemente in SVG Grafiken.

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 circle-Element</title>
  <desc>ein Kopf aus Kreisen</desc>
    <!-- 2 schwarze Ohren -->
    <circle cx="150" cy="50" r="40" fill="black" />
    <circle cx="260" cy="50" r="40" fill="black" />

    <!-- der Kopf -->
    <circle cx="205" cy="100" r="80" fill="yellow" stroke="black" />

    <!-- die Augen -->
    <circle cx="180" cy="67" r="14" fill="white" stroke="black" />
    <circle cx="230" cy="67" r="14" fill="white" stroke="black" />
    <circle cx="180" cy="70" r="10" fill="black" />
    <circle cx="230" cy="70" r="10" fill="black" />

    <!-- die Nase -->
    <circle cx="205" cy="90" r="15" fill="red" />

    <!-- der Mund -->
    <circle cx="205" cy="140" r="17" fill="red" stroke="black" />
    <circle cx="205" cy="130" r="17" fill="yellow" />
</svg>
      



index  |  Kapitel 4  |  4.1  <<  | 4.2 |  >>  4.3   Ellipsen - das ellipse-Element