SVGEllipseElement

Базовая поддержка Широко распространена

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

Интерфейс SVGEllipseElement предоставляет доступ к свойствам элементов <ellipse>.

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

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

SVGEllipseElement.cx Только для чтения: Это свойство возвращает SVGAnimatedLength, отражающий атрибут cx данного элемента <ellipse>.
SVGEllipseElement.cy Только для чтения: Это свойство возвращает SVGAnimatedLength, отражающий атрибут cy данного элемента <ellipse>.
SVGEllipseElement.rx Только для чтения: Это свойство возвращает SVGAnimatedLength, отражающий атрибут rx данного элемента <ellipse>.
SVGEllipseElement.ry Только для чтения: Это свойство возвращает SVGAnimatedLength, отражающий атрибут ry данного элемента <ellipse>.

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

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

Пример

SVG

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <ellipse
    cx="100"
    cy="100"
    rx="100"
    ry="60"
    id="ellipse"
    onclick="outputSize();" />
</svg>

JavaScript

function outputSize() {
  const ellipse = document.getElementById("ellipse");

  // Outputs "horizontal radius: 100 vertical radius: 60"
  console.log(
    `horizontal radius: ${ellipse.rx.baseVal.valueAsString}`,
    `vertical radius: ${ellipse.ry.baseVal.valueAsString}`,
  );
}

Результат

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

Спецификация
Масштабируемая векторная графика (SVG) 2 # InterfaceSVGEllipseElement

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`SVGEllipseElement`	1	12	1.5	≤12.1	3	18	4	≤12.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
`rx`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`ry`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3

См. также

<ellipse> Элемент 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/SVGEllipseElement