SVGCircleElement

Baseline Widely available

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

DieSVGCircleElement-Schnittstelle ist eine Schnittstelle für das<circle>-Element.

Instanz-Eigenschaften

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

SVGCircleElement.cxSchreibgeschützt: Diese Eigenschaft definiert die x-Koordinate des Mittelpunkts des<circle>-Elements. Sie wird durch dascx-Attribut des Elements angegeben.
SVGCircleElement.cySchreibgeschützt: Diese Eigenschaft definiert die y-Koordinate des Mittelpunkts des<circle>-Elements. Sie wird durch dascy-Attribut des Elements angegeben.
SVGCircleElement.rSchreibgeschützt: Diese Eigenschaft definiert den Radius des<circle>-Elements. Sie wird durch dasr-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

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