|
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>
| 
