SVG Circle
SVG Circle （SVG圆形）
Description of the <circle> element
Description of the <circle> element
The SVG <circle> element creates circles, based on a center point and a radius. The coordinates of the circle’s center are specified by the cx and cy attributes. And the radius of the circle is specified by the r attribute.
Example of the 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。）
</svg>
</body>
</html>
Let’s explain the code above: （我们来解释一下上面的代码：）
The cx and cy attributes specify the x and y coordinates of the circle’s center. In the cases where the cx and cy attributes are omitted, the center of the circle is set to (0,0). （- cx和cy属性指定圆心x和y坐标。在省略cx和cy属性的情况下，圆的中心设置为(0,0)。）
The r attribute is used to specify the radius of the circle. （- r属性用于指定圆的半径。）
Advanced SVG Circle Techniques
Advanced SVG Circle Techniques （高级SVG圆形技术）
While basic SVG circles are great, there are many advanced techniques that you can use to make your SVG circles stand out. Here are a few examples: （虽然基本的SVG圆圈很棒，但您可以使用许多高级技术来使您的SVG圆圈脱颖而出。以下是一些示例：）
Gradients
SVG circles can use gradients to create a smooth transition between colors. Here is an example: （SVG圆圈可以使用渐变来创建颜色之间的平滑过渡。下面是一个示例：）
<!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 this example, we have created a gradient that goes from yellow to red. We then use the fill attribute to apply the gradient to our circle. （在此示例中，我们创建了一个从黄色到红色的渐变。然后，我们使用填充属性将渐变应用于我们的圆。）
Shadows
SVG circles can also have shadows to create depth and dimension. Here is an example: （SVG圆圈也可以有阴影来创建深度和尺寸。下面是一个示例：）
<!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 this example, we have created a blue circle with a shadow. We use the filter attribute to apply the shadow effect, which is defined in the filter element. （在此示例中，我们创建了一个带阴影的蓝色圆圈。我们使用filter属性来应用在filter元素中定义的阴影效果。）
Animations
Finally, SVG circles can also be animated to create interactive experiences for your users. Here is an example: （最后，还可以对SVG圈子进行动画处理，为用户创建交互式体验。下面是一个示例：）
<!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 this example, we have created a green circle that moves when clicked. We use the animate element to define the animation and attach it to the circle element using the attributeName attribute. （在此示例中，我们创建了一个在单击时移动的绿色圆圈。我们使用animate元素来定义动画，并使用attributeName属性将其附加到circle元素。）
Attributes
Attributes （属性）
The SVG <circle> element also supports the Global Attributes and Event Attributes.
| Attribute | Description |
|---|---|
| cx | The x-axis coordinate of the circle’s center. |
| cy | The y-axis coordinate of the circle’s center. |
| r | The radius of the circle. A value that is lower or equal to zero will disable the rendering of the circle. |
| pathlength | This attribute specifies the total length for the path, in user units. |