SVGCircleElement

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.

Erbt Methoden von ihrer Elternschnittstelle, SVGGeometryElement.

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

JavaScript

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

• <circle> SVG-Element