SVGCircleElement

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

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

EventTarget Node Element SVGElement SVGGraphicsElement SVGGeometryElement SVGCircleElement

In diesem Artikel

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.

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" />
</svg>

JavaScript

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

<circle> SVG-Element

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

SVGCircleElement

In diesem Artikel

Instanz-Eigenschaften

Instanz-Methoden

Beispiele

Ändern der Größe eines Kreises

HTML

JavaScript

Spezifikationen

Browser-Kompatibilität

Siehe auch

Help improve MDN