# SVGCircleElement

## 在此页

``` SVGCircleElement ``` interface is an interface for the ``` <circle> ``` 元素。

## 特性

This interface also inherits properties from its parent, ``` SVGGeometryElement ``` .

``` SVGCircleElement.cx ``` 只读

This property defines the x-coordinate of the center of the ``` <circle> ``` element. It is denoted by the ``` cx ``` attribute of the element.

``` SVGCircleElement.cy ``` 只读

This property defines the y-coordinate of the center of the ``` <circle> ``` element. It is denoted by the ``` cy ``` attribute of the element.

``` SVGCircleElement.r ``` 只读

This property defines the radius of the ``` <circle> ``` element. It is denoted by the ``` r ``` of the element.

## 方法

This interface has no methods but inherits methods from its parent, ``` SVGGeometryElement ``` .

## 范例

### SVG content

```<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 250 250" width="250" height="250">
<circle cx="100" cy="100" r="50" fill="gold" id="circle"
onclick="clickCircle();"/>
</svg>
```

### JavaScript 内容

This function ``` clickCircle() ``` is called when the circle is clicked. It randomly increases or decreases the radius of the circle element.

```function clickCircle() {
var circle = document.getElementById("circle");
// Randomly determine if the circle radius will increase or decrease
var change = Math.random() > 0.5 ? 10 : -10;
// Clamp the circle radius to a minimum of 10 and a maximum of 250,
// so it won't disappear or get bigger than the viewport
var newValue = Math.min(Math.max(circle.r.baseVal.value + change, 10), 250);
circle.setAttribute("r", newValue);
}
```

Click on the circle.

## 规范

 规范 状态 Comment Scalable Vector Graphics (SVG) 2 The definition of 'SVGCircleElement' in that specification. 候选推荐 Replaced the inheritance from ``` SVGElement ``` , ``` SVGTests ``` , ``` SVGLangSpace ``` , ``` SVGExternalResourcesRequired ``` , ``` SVGStylable ``` ，和 ``` SVGTransformable ``` by ``` SVGGeometryElement ``` Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'SVGCircleElement' in that specification. Recommendation 初始定义

## 浏览器兼容性

 Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Chrome 1 Edge 12 Firefox 1.5 IE 9 Opera 8 Safari 3.1 WebView Android 3 Chrome Android 18 Firefox Android 4 Opera Android Yes Safari iOS 3.1 Samsung Internet Android 1.0 Chrome Yes Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes Chrome Yes Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes Chrome Yes Edge 12 Firefox Yes IE ? Opera Yes Safari Yes WebView Android Yes Chrome Android Yes Firefox Android Yes Opera Android Yes Safari iOS Yes Samsung Internet Android Yes

## 另请参阅

1. ``` SVGCircleElement ```
2. 特性
3. 继承：
4. Related pages for SVG