SVGCircleElement

Baseline Широко доступно

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с января 2020 года.

Интерфейс SVGCircleElement является интерфейсом для элемента <circle>.

Свойства экземпляра

Этот интерфейс также наследует свойства от своего родителя, SVGGeometryElement.

SVGCircleElement.cx Только для чтения: Это свойство определяет координату x центра элемента <circle>. Оно обозначается атрибутом cx элемента.
SVGCircleElement.cy Только для чтения: Это свойство определяет координату y центра элемента <circle>. Оно обозначается атрибутом cy элемента.
SVGCircleElement.r Только для чтения: Это свойство определяет радиус элемента <circle>. Оно обозначается атрибутом r элемента.

Методы экземпляра

Наследует методы от родительского интерфейса SVGGeometryElement.

Примеры

Изменение размера круга

В этом примере мы рисуем круг и случайным образом увеличиваем или уменьшаем его радиус при нажатии.

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

Спецификации

Спецификация
Векторная графика SVG (SVG) 2 # InterfaceSVGCircleElement

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`SVGCircleElement`	1	12	1.5	8	3	18	4	10.1	1	1.0	3
`cx`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`cy`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`r`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3

См. также

<circle> Элемент SVG

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/SVGCircleElement