SVGRectElement

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

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

Интерфейс SVGRectElement предоставляет доступ к свойствам элементов <rect>, а также методы для их изменения.

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

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

SVGRectElement.x Только чтение: Возвращает SVGAnimatedLength, соответствующий атрибуту x данного элемента <rect>.
SVGRectElement.y Только чтение: Возвращает SVGAnimatedLength, соответствующий атрибуту y данного элемента <rect>.
SVGRectElement.width Только чтение: Возвращает SVGAnimatedLength, соответствующий атрибуту width данного элемента <rect>.
SVGRectElement.height Только чтение: Возвращает SVGAnimatedLength, соответствующий атрибуту height данного элемента <rect>.
SVGRectElement.rx Только чтение: Возвращает SVGAnimatedLength, соответствующий атрибуту rx данного элемента <rect>.
SVGRectElement.ry Только чтение: Возвращает SVGAnimatedLength, соответствующий атрибуту ry данного элемента <rect>.

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

Этот интерфейс не реализует специфических методов, но наследует методы от своего родительского класса, SVGGeometryElement.

Примеры

Изменение цвета прямоугольника SVG

В этом примере цвет заливки SVGRectElement меняется на случайное значение при каждом клике пользователя.

HTML

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <rect
    width="300"
    height="100"
    id="myrect"
    style="fill:rgb(0 0 255);stroke-width:1;stroke:rgb(0 0 0)" />
  <text x="60" y="40" fill="white" font-size="40">Click Me</text>
</svg>

JavaScript

const myRect = document.querySelector("#myrect");

myRect.addEventListener("click", () => {
  const r = Math.floor(Math.random() * 255);
  const g = Math.floor(Math.random() * 255);
  const b = Math.floor(Math.random() * 255);
  myRect.style.fill = `rgb(${r} ${g} ${b})`;
});

Результат

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

Спецификация
Scalable Vector Graphics (SVG) 2 # InterfaceSVGRectElement

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`SVGRectElement`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`height`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`rx`	1	12	1.5	≤12.1	4	18	4	≤12.1	3.2	1.0	3
`ry`	1	12	1.5	≤12.1	4	18	4	≤12.1	3.2	1.0	3
`width`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`x`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3
`y`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	3

См. также

<rect>

© 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/SVGRectElement