SVG-Kreis<circle>

Die<circle>-Element in SVG wird zum Zeichnen von Kreisen verwendet und ist eine der gängigen Grundformen in SVG.

Mit der<circle>-Element können Sie kreisförmige Grafiken erstellen, und Sie können die Position, die Größe und den Stil des Kreises durch Festlegen von Attributen steuern.

Grundlegende Syntax

<circle
  cx="x-coordinate"      <!-- 圆心的 x 坐标 -->
  cy="y-coordinate"      <!-- 圆心的 y 坐标 -->
  r="radius"             <!-- 圆的半径 -->
  fill="fill-color"      <!-- 圆的填充颜色 -->
  stroke="stroke-color"  <!-- 圆的描边颜色 -->
  stroke-width="width"   <!-- 圆的描边宽度 -->
/>

Attributerklärung:

• cxundcyDas Attribut definiert die Koordinaten des Mittelpunkts des Kreises, d. h. die Position des Kreismittelpunkts.

• rDas Attribut definiert den Radius des Kreises, um seine Größe festzulegen.

• fillDas Attribut definiert die Füllfarbe des Kreises.

• strokeDas Attribut definiert die Strichfarbe des Kreises.

• stroke-widthDas Attribut definiert die Strichbreite des Kreises.

Der folgende Code zeichnet einen Kreis mit blauer Füllung, schwarzem Strich und einem Radius von 50 Pixeln, mit dem Mittelpunkt bei (100, 100).

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="50" fill="blue" stroke="black" stroke-width="2" />
</svg>

Beispiel

Unten ist der SVG-Code:

Zum Anzeigen klicken:。

Code-Erklärung:

• Die Attribute cx und cy definieren die x- und y-Koordinaten des Mittelpunkts des Kreises. Wenn cx und cy weggelassen werden, wird der Mittelpunkt des Kreises auf (0, 0) gesetzt.
• Das r-Attribut definiert den Radius des Kreises.