SVG <circle>

SVG Circle - <circle>

<circle> The element is used to create a circle:

This is the SVG code:

Example

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

Try it yourself

Code Explanation:

  • Die cx- und cy-Eigenschaften definieren die x- und y-Koordinaten des Zentrums. Wenn cx und cy weggelassen werden, wird das Zentrum auf (0,0) gesetzt.
  • Die r-Eigenschaft definiert den Radius des Kreises.