SVG <Ellipse>
SVG-Ellipse - <Ellipse>
Das Element <ellipse> wird verwendet, um eine Ellipse zu erstellen.
Eine Ellipse ist eng mit einem Kreis verwandt. Der Unterschied besteht darin, dass eine Ellipse einen x- und einen y-Radius hat, der sich voneinander unterscheidet, während ein Kreis einen gleichen x- und y-Radius hat:
Beispiel 1
Das folgende Beispiel erstellt eine Ellipse:
Hier ist der SVG-Code:
Beispiel
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
Code-Erklärung:
- Das Attribut cx definiert die x-Koordinate des Mittelpunkts der Ellipse
- Das Attribut cy definiert die y-Koordinate des Mittelpunkts der Ellipse
- Das rx-Attribut definiert den horizontalen Radius
- Das ry-Attribut definiert den vertikalen Radius
Beispiel 2
Das folgende Beispiel erstellt drei Ellipsen übereinander:
Hier ist der SVG-Code:
Beispiel
<svg height="150" width="500">
<ellipse cx="240" cy="100" rx="220" ry="30"
style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20"
style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15"
style="fill:yellow" />
</svg>
Beispiel 3
Das folgende Beispiel kombiniert zwei Ellipsen (eine gelbe und eine weiße):
Hier ist der SVG-Code:
Beispiel
<svg height="100" width="500">
<ellipse cx="240" cy="50" rx="220" ry="30"
style="fill:yellow" />
<ellipse cx="220" cy="50" rx="190" ry="20"
style="fill:white" />
</svg>