SVG Circle
Auf dieser Seite finden Sie Informationen zum SVG-Element <circle>, lernen Sie, damit einen Kreis zu erstellen, und sehen Beispiele mit verschiedenen Attributen.
Beschreibung des <circle>-Elements
Das SVG-Element <circle> zeichnet einen Kreis aus einem Mittelpunkt und einem Radius. Die Koordinaten des Kreismittelpunkts werden mit den Attributen cx und cy festgelegt, und der Radius wird mit dem Attribut r angegeben.
Es ist eine der grundlegenden SVG-Formen, zusammen mit den Elementen <ellipse>, <rect> und <line>. Verwenden Sie <circle>, wenn Sie eine perfekt runde Form benötigen, die ohne Qualitätsverlust skaliert, da SVG vektorbasiert ist.
Beispiel des SVG-Elements <circle>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg height="300" width="300">
<circle cx="150" cy="150" r="100" stroke="grey" stroke-width="5" fill="purple" />
Sorry, inline SVG isn't supported by your browser.
</svg>
</body>
</html>Erklären wir den obigen Code:
- Die Attribute
cxundcygeben die x- und y-Koordinaten des Kreismittelpunkts an. - Das Attribut
rgibt den Radius des Kreises an. - Die Attribute
strokeundstroke-widthzeichnen einen 5px grauen Umriss, undfillfärbt das Innere lila.
Das cx/cy-Standardwert-Problem: Wenn Sie cx und cy weglassen, werden beide standardmäßig auf 0 gesetzt, wodurch der Mittelpunkt in der oberen linken Ecke der SVG-Leinwand platziert wird. Dann bleibt nur das untere rechte Viertel des Kreises sichtbar — der Rest wird außerhalb des viewport abgeschnitten. Setzen Sie cx und cy immer mindestens auf r, damit der gesamte Kreis innerhalb des SVG passt.
Erweiterte SVG-Kreis-Techniken
Während einfache SVG-Kreise großartig sind, gibt es viele erweiterte Techniken, mit denen Sie Ihre SVG-Kreise hervorheben können. Hier sind einige Beispiele:
Farbverläufe
SVG-Kreise können Farbverläufe verwenden, um einen sanften Übergang zwischen Farben zu erzeugen. Hier ist ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<circle cx="50" cy="50" r="40" fill="url(#grad1)" />
</svg>
</body>
</html>In diesem Beispiel haben wir einen Farbverlauf von Gelb nach Rot erstellt. Anschließend verwenden wir das Attribut fill, um den Farbverlauf auf unseren Kreis anzuwenden.
Schatten
SVG-Kreise können auch Schatten haben, um Tiefe und Dimension zu erzeugen. Der Filter muss innerhalb eines <defs>-Blocks definiert werden (oder zumindest vor dem Element, das ihn referenziert), damit der Browser die url(#shadow)-Referenz auflösen kann. Hier ist ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg width="120" height="120">
<defs>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feDropShadow dx="2" dy="2" stdDeviation="2" flood-color="black" />
</filter>
</defs>
<circle cx="50" cy="50" r="40" fill="blue" filter="url(#shadow)" />
</svg>
</body>
</html>Hier definieren wir den Schattenfilter in <defs> und wenden ihn dann mit filter="url(#shadow)" auf den Kreis an. Das Primitive feDropShadow erledigt die Arbeit: dx und dy verschieben den Schatten, stdDeviation steuert die Unschärfestärke, und flood-color legt die Schattenfarbe fest. Die Attribute x, y, width und height des Filters vergrößern den Filterbereich auf 140%, damit der versetzte, unscharfe Schatten nicht an den Rändern des Standard-Filterrahmens abgeschnitten wird.
Animationen
Schließlich können SVG-Kreise auch animiert werden, um interaktive Erlebnisse für Ihre Benutzer zu schaffen. Hier ist ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<circle id="myCircle" cx="50" cy="50" r="40" fill="green">
<animate attributeName="cx" from="50" to="200" dur="1s" begin="click" />
</circle>
</svg>
</body>
</html>In diesem Beispiel haben wir einen grünen Kreis erstellt, der sich beim Anklicken bewegt. Wir verwenden das Element <animate>, um die Animation zu definieren, und geben mit dem Attribut attributeName an, welche Eigenschaft geändert werden soll.
Hinweis:
<animate>ist Teil von SMIL, dessen Browserunterstützung lückenhaft ist und in der Vergangenheit in einigen Engines als veraltet markiert wurde. Für den produktiven Einsatz sind CSS-Animationen oder JavaScript (zum Beispiel die Web Animations API) in der Regel die zuverlässigere Wahl.
Attribute
Das SVG-Element <circle> unterstützt auch die globalen Attribute und Ereignisattribute.
| Attribut | Beschreibung |
|---|---|
| cx | Die x-Achsen-Koordinate des Kreismittelpunkts. Standardwert ist 0. |
| cy | Die y-Achsen-Koordinate des Kreismittelpunkts. Standardwert ist 0. |
| r | Der Radius des Kreises. Ein Wert kleiner oder gleich null deaktiviert die Darstellung des Kreises. |
| stroke | Die Farbe des Kreisumrisses. |
| stroke-width | Die Breite des Kreisumrisses in Benutzereinheiten. |
| fill | Die Farbe, mit der das Innere des Kreises gefüllt wird. |
| pathLength | Gibt die Gesamtlänge des Pfads in Benutzereinheiten an (SVG-Attributnamen unterscheiden zwischen Groß- und Kleinschreibung). |
Kreise akzeptieren auch die üblichen SVG-Präsentationsattribute: fill-opacity und stroke-opacity steuern die Transparenz der Füllung und des Umrisses, und stroke-dasharray wandelt einen durchgehenden Umriss in einen gestrichelten um (zum Beispiel stroke-dasharray="10 5").
Das Element <circle> ist eng mit den anderen grundlegenden SVG-Formen verwandt. Siehe SVG <ellipse> für Ovale mit zwei unabhängigen Radien und SVG <rect> für Rechtecke und abgerundete Rechtecke.