SVGCircleElement

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

Instanz-Eigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem Elternteil, SVGGeometryElement.

SVGCircleElement.cx Schreibgeschützt

Diese Eigenschaft definiert die x-Koordinate des Zentrums des <circle>-Elements. Sie wird durch das cx-Attribut des Elements angegeben.

SVGCircleElement.cy Schreibgeschützt

Diese Eigenschaft definiert die y-Koordinate des Zentrums des <circle>-Elements. Sie wird durch das cy-Attribut des Elements angegeben.

SVGCircleElement.r Schreibgeschützt

Diese Eigenschaft definiert den Radius des <circle>-Elements. Sie wird durch das r des Elements angegeben.

Instanz-Methoden

Erbt Methoden von ihrer Elternschnittstelle, SVGGeometryElement.

Beispiele

Kreis vergrößern oder verkleinern

In diesem Beispiel zeichnen wir einen Kreis und vergrößern oder verkleinern zufällig seinen Radius, wenn Sie darauf klicken.

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"
    onclick="clickCircle();" />
</svg>

JavaScript

js
function clickCircle() {
  const circle = document.getElementById("circle");
  // 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);
}

Spezifikationen

Specification
Scalable Vector Graphics (SVG) 2
# InterfaceSVGCircleElement

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
SVGCircleElement
cx
cy
r

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch