SVG <ellipse> Ellipse zeichnen

Der SVG <ellipse>-Element wird verwendet, um Ellipsen zu zeichnen. Eine Ellipse ist ein Kreis, der in der Höhe und Breite ungleich ist. Mit anderen Worten, seine Radien in x- und y-Richtung sind unterschiedlich.

SVG-Ellipse-Beispiel

Dies ist ein Beispielcode zum Zeichnen einer Ellipse:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<ellipse cx="40" cy="40" rx="30" ry="15"
　　　　　　　　　　　style="stroke:#006600;　fill:#00cc00"/>
</svg>

Das Ergebnis nach dem Ausführen ist wie folgt:

Die cx und cy der Ellipse sind wie bei einem Kreis zentriert. Aber die Radien in x- und y-Richtung werden durch zwei Attribute (nicht durch ein einziges) angegeben: die rx- und ry-Attribute. Wie man sieht, hat das rx-Attribut einen höheren Wert als das ry-Attribut, was die Ellipse breiter als hoch macht. Durch das Einstellen der rx- und ry-Attribute auf die gleiche Zahl wird ein Kreis erzeugt.

stroke-Kantenbreite der Ellipse einstellen

Man kann die style-Eigenschaft stroke-width setzt die Kantenbreite der Ellipse fest. Beispiel:

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke:　#ff0000;stroke-width:　5;fill:　none;"/>
</svg>

Das Ergebnis nach dem Ausführen ist wie folgt:

Wellenlinien-Ellipse

Man kann auch die style-Eigenschaft stroke-dasharray macht die Striche der Ellipse in Wellenlinien.

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke:　#ff0000;stroke-width:　5;
　　　　　　　　　stroke-dasharray:　10　5;fill:　none;"/>
</svg>

In diesem Beispiel wird die Strichbreite auf10, der Abstand zwischen den Strichen (der Abstand zwischen den Strichen) ist eingestellt auf5. Dies ist das Aussehen bei der Renderei der Ellipse:

Transparente Kante

Man kann die style-Eigenschaft stroke-Die Opacity macht die SVG-Ellipse-Kante halbtransparent.

<svg height="120">
　　　　<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　　　　　fill: none;/ellipse>
　　　　<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　　　　　style="stroke:　#0000ff;
　　　　　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　　　　　stroke-opacity: 0.5;
　　　　　　　　　　　　　　　　　　　fill: none;/ellipse>
</svg>

Nach dem Ausführen hat der SVG-Ellipse-Effekt folgendermaßen ausgesehen:

Beachten Sie, dass die zweite (blaue) Ellipse transparent ist und wie man durch ihre Striche die rote Ellipse sieht.

Ellipse füllen

Man kann die fill-Style-Eigenschaft verwenden, um die Ellipse zu füllen:

<svg height="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　fill:　#ff6666;"/>
</svg>

Nach dem Ausführen hat das Aussehen des SVG-Ellipses folgendermaßen ausgesehen:

Füllung mit Transparenz

fill-Die opacity-Styleeigenschaft kann verwendet werden, um die Transparenz (Transparenz) der Füllfarbe eines Ellipses zu setzen:

<svg height="120">
<ellipse cx="50" cy="50" rx="40" ry="30"
　　　　　　　　　style="stroke: #ff0000;
　　　　　　　　　　　　　　　stroke-width:　5;
　　　　　　　　　　　　　　　fill: none;/ellipse>
<ellipse cx="60" cy="60" rx="40" ry="30"
　　　　　　　　　style="stroke: none;
　　　　　　　　　　　　　　　fill: #0000ff;
　　　　　　　　　　　　　　　fill-opacity: 0.5;"></ellipse>
</svg>

Der Aussehen des Ellipses bei der Rendere ist wie folgt:

Beachten Sie, dass der zweite (blaue) Ellipse halbtransparent ist, sodass der rote Ellipse sichtbar wird.