SVG Tutoriallogin
SVG Tutorial
author:php.cn  update time:2022-04-18 17:51:50

SVG circle



<circle> tag can be used to create a circle:

Here is the SVG code:

Example

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg> 
 
</body>
</html>

Run Instance»

Click the "Run Instance" button to view the online instance

For Opera users: View SVG file (right-click Click on the SVG graphic preview source).

Code analysis:

  • The cx and cy attributes define the x and y coordinates of the point. If cx and cy are omitted, the center of the circle will be set to (0, 0)

  • r attribute defines the radius of the circle

php.cn