circle

osbo.com | SVG | Elements | circle

The circle SVG element specifies a circle based on a center point and a radius.

Specifies the x-coordinate of the center of the element.

<length-percentage>

0

Specifies the y-coordinate of the center of the element.

<length-percentage>

0

Specifies the total length of the path in user units.

<number>

(none)

Specifies the radius of the element.

<length-percentage>

0

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> circle { cy: 50; r: 50; } circle:nth-of-type(2) { fill: red; } </style> <circle cx="50"/> <circle cx="50%"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> circle { cx: 50; r: 50; } circle:nth-of-type(2) { fill: red; } </style> <circle cy="50"/> <circle cy="50%"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> circle { cx: 50%; cy: 50%; r: 50; stroke: red; stroke-dasharray: 1; stroke-width: 10; } </style> <circle pathLength="10"/> </svg>

<svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg"> <style> circle { cx: 50%; cy: 50%; } circle:nth-of-type(2) { fill: red; } </style> <circle r="50%"/> <circle r="50"/> </svg>

ellipse

line

polygon

polyline

rect

World Wide Web Consortium (W3C)