SVGCircleElement

Instanz-Eigenschaften

Diese Schnittstelle erbt auch Eigenschaften von ihrem übergeordneten Element, SVGGeometryElement.

SVGCircleElement.cx Schreibgeschützt

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

SVGCircleElement.cy Schreibgeschützt

Diese Eigenschaft definiert die y-Koordinate des Mittelpunkts 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-Attribut des Elements angegeben.

Instanz-Methoden

Erbt Methoden von seiner übergeordneten Schnittstelle, SVGGeometryElement.

Beispiele

Ändern der Größe eines Kreises

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

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

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);

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <circle> SVG-Element