SVGCircleElement

Instanz-Eigenschaften

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

SVGCircleElement.cx Schreibgeschtzt

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

SVGCircleElement.cy Schreibgeschtzt

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

SVGCircleElement.r Schreibgeschtzt

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 Gre eines Kreises

In diesem Beispiel zeichnen wir einen Kreis und vergrern oder verkleinern zufllig 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-Kompatibilitt

Siehe auch

• <circle> SVG-Element