SVG-Kreis
Beschreibung des <circle>-Elements
Das SVG <circle>-Element erstellt Kreise basierend auf einem Mittelpunkt und einem Radius. Die Koordinaten des Kreismittelpunkts werden durch die Attribute cx und cy festgelegt. Der Radius des Kreises wird durch das Attribut r angegeben.
Beispiel für das SVG <circle>-Element:
Beispiel für das SVG <circle>-Element
<!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 cx und cy geben die x- und y-Koordinaten des Kreismittelpunkts an. Falls die Attribute cx und cy weggelassen werden, wird der Mittelpunkt des Kreises auf (0,0) gesetzt.
- Das Attribut r wird verwendet, um den Radius des Kreises festzulegen.
Fortgeschrittene SVG-Kreistechniken
Während einfache SVG-Kreise großartig sind, gibt es viele fortgeschrittene 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:
SVG-Kreise können Farbverläufe verwenden, um einen sanften Übergang zwischen Farben zu erzeugen
<!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. Hier ist ein Beispiel:
SVG-Kreise können auch Schatten haben, um Tiefe und Dimension zu erzeugen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<svg>
<circle cx="50" cy="50" r="40" fill="blue" filter="url(#shadow)" />
<filter id="shadow">
<feDropShadow dx="2" dy="2" stdDeviation="2" />
</filter>
</svg>
</body>
</html>In diesem Beispiel haben wir einen blauen Kreis mit einem Schatten erstellt. Wir verwenden das Attribut filter, um den Schatteneffekt anzuwenden, der im filter-Element definiert ist.
Animationen
Schließlich können SVG-Kreise auch animiert werden, um interaktive Erlebnisse für Ihre Benutzer zu schaffen. Hier ist ein Beispiel:
SVG-Kreise können auch animiert werden, um interaktive Erlebnisse zu schaffen
<!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 Klicken bewegt. Wir verwenden das animate-Element, um die Animation zu definieren, und hängen sie über das Attribut attributeName an das circle-Element an.
Attribute
Das SVG <circle>-Element unterstützt auch die Globalen Attribute und Ereignisattribute.
| Attribute | Description |
|---|---|
| cx | Die x-Koordinate des Kreismittelpunkts. |
| cy | Die y-Koordinate des Kreismittelpunkts. |
| r | Der Radius des Kreises. Ein Wert, der kleiner oder gleich null ist, deaktiviert die Darstellung des Kreises. |
| pathlength | Dieses Attribut gibt die Gesamtlänge des Pfads in Benutzereinheiten an. |
Übungen
Welche der folgenden Attribute sind erforderlich, um ein SVG-Kreiselement in HTML zu erstellen?