例項屬性
此介面還繼承了其父介面 SVGGeometryElement 的屬性。
SVGCircleElement.cx只讀SVGCircleElement.cy只讀-
此屬性定義了
<circle>元素的中心 y 座標。它由元素的cy屬性表示。 SVGCircleElement.r只讀-
此屬性定義了
<circle>元素的半徑。它由元素的r屬性表示。
例項方法
繼承自其父介面 SVGGeometryElement 的方法。
示例
調整圓的大小
在此示例中,我們繪製一個圓,並在您單擊它時隨機增加或減小其半徑。
HTML
html
<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" />
</svg>
JavaScript
js
const circle = document.getElementById("circle");
function clickCircle() {
// Randomly determine if the circle radius will increase or decrease
const 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
const newValue = Math.min(Math.max(circle.r.baseVal.value + change, 10), 250);
circle.setAttribute("r", newValue);
}
circle.addEventListener("click", clickCircle);
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # InterfaceSVGCircleElement |
瀏覽器相容性
載入中…
另見
<circle>SVG 元素