Latest web development tutorials

SVG Ellipse

SVG Ellipse - <Ellipse>

Beispiel 1

lt; Ellipse> Element wird verwendet, um eine Ellipse zu erstellen:

Ovale und runde sehr ähnlich. Außer, dass die Ellipse einen unterschiedlichen Radius von x und y, und x und y Radius des Kreises ist gleich:

Hier ist der SVG-Code:

Beispiele

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="300" cy="80" rx="100" ry="50"
style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

Versuchen »

Für Opera Benutzer: Ansicht SVG - Datei (Rechtsklick auf die Vorschau Quelle SVG - Grafiken).

-Code - Analyse:

  • x-Koordinate CX definierten Mittelpunkt der Ellipse Attribute
  • y-Koordinate CY Attribut definiert den Mittelpunkt der Ellipse
  • Horizontal Radius RX Attributdefinition
  • Vertikal Radius RY Attributdefinition

Beispiel 2

Das folgende Beispiel erzeugt drei und auf dem Oval gehäuft:

Hier ist der SVG-Code:

Beispiele

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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>

Versuchen »

Für Opera Benutzer: Ansicht SVG - Datei (Rechtsklick auf die Vorschau Quelle SVG - Grafiken).

Beispiel 3

Das folgende Beispiel kombiniert zwei Ellipse (ein gelber und ein weiß):

Hier ist der SVG-Code:

Beispiele

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<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>

Versuchen »

Für Opera Benutzer: Ansicht SVG - Datei (Rechtsklick auf die Vorschau Quelle SVG - Grafiken).