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 Nur lesbar

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

SVGCircleElement.cy Nur lesbar

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

SVGCircleElement.r Nur lesbar

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

BCD tables only load in the browser

Siehe auch