SVGCircleElement

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

SVGCircleElement 介面是 <circle> 元素的介面。

EventTarget Node Element SVGElement SVGGraphicsElement SVGGeometryElement SVGCircleElement

例項屬性

此介面還繼承了其父介面 SVGGeometryElement 的屬性。

SVGCircleElement.cx 只讀

此屬性定義了 <circle> 元素的中心 x 座標。它由元素的 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

瀏覽器相容性

另見