SVG-Ellipse
Beschreibung des <ellipse>-Elements
Das SVG <ellipse>-Element erstellt Ellipsen. Die Ellipse wird durch die Attribute cx und cy zentriert. Im Gegensatz zum <circle>-Element wird der Radius in x- und y-Richtung jedoch durch zwei Attribute und nicht durch eines angegeben.
DANGER
Eine Ellipse und ein Kreis ähneln sich. Der Unterschied besteht darin, dass eine Ellipse einen x- und einen y-Radius hat, die sich voneinander unterscheiden. Der x- und y-Radius eines Kreises ist gleich. Das Ellipsen-Element definiert nicht die genaue Ausrichtung, aber Sie können es mit dem Attribut transform drehen.
Beispiel für das SVG <ellipse>-Element:
Beispiel für das SVG <ellipse>-Element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200" >
<ellipse cx="230" cy="120" rx="150" ry="70" style="fill:pink;stroke:lightblue;stroke-width:5" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Im Folgenden wird der obige Code erklärt:
- Das Attribut
cxgibt die x-Koordinate des Mittelpunkts der Ellipse an. - Das Attribut
cygibt die y-Koordinate des Mittelpunkts der Ellipse an. - Das Attribut
rxgibt den horizontalen Radius an. - Das Attribut
rygibt den vertikalen Radius an.
Beispiel für das SVG <ellipse>-Element zum Erstellen zweier übereinanderliegender Ellipsen:
Beispiel für das SVG <ellipse>-Element zum Erstellen zweier übereinanderliegender Ellipsen
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="200">
<ellipse cx="200" cy="110" rx="160" ry="25" style="fill:lightblue" />
<ellipse cx="190" cy="85" rx="140" ry="20" style="fill:blue" />
Sorry,inline SVG isn't supported by your browser.
</svg>
</body>
</html>Sie können beliebig viele Ellipsen mit verschiedenen Farben und Größen hinzufügen.
Beispiel für das SVG <ellipse>-Element zum Kombinieren zweier Ellipsen:
Beispiel für das SVG <ellipse>-Element zum Kombinieren zweier Ellipsen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="400" height="150" >
<ellipse cx="200" cy="70" rx="200" ry="35" style="fill:purple" />
<ellipse cx="190" cy="70" rx="160" ry="25" style="fill:lightgrey" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>| Attribut | Beschreibung |
|---|---|
| cx | Dieses Attribut gibt die x-Position der Ellipse an. |
| cy | Dieses Attribut gibt die y-Position der Ellipse an. |
| rx | Dieses Attribut gibt den Radius der Ellipse auf der x-Achse an. |
| ry | Dieses Attribut gibt den Radius der Ellipse auf der y-Achse an. |
| pathlength | Dieses Attribut gibt die Gesamtlänge des Pfads in Benutzereinheiten an. |
Das SVG <ellipse>-Element unterstützt auch die Globalen Attribute und Ereignisattribute.
Praxis
Welche Attribute können verwendet werden, um die SVG-Ellipse in HTML zu definieren?