W3docs
ru
Войти

SVG Прямоугольник

На этой странице вы найдёте полезную информацию об элементе SVG <rect>, научитесь создавать прямоугольники и увидите примеры с CSS.

Элемент SVG <rect> рисует прямоугольник. Это одна из базовых фигур SVG (наряду с <circle>, <ellipse>, <line> и <polygon>), которая размещается непосредственно внутри элемента <svg>. На этой странице рассматривается, как задать позицию и размер прямоугольника, скруглить его углы, а также управлять заливкой и обводкой с помощью атрибутов представления или CSS.

Если SVG для вас в новинку, начните с введения в SVG. Полный список атрибутов и элементов смотрите в справочнике по SVG.

Описание элемента <rect>

Элемент SVG <rect> создаёт прямоугольник, а также его разновидности. Можно рисовать прямоугольники различной высоты и ширины, с разными цветами обводки и заливки и т. д. Рассмотрим несколько примеров.

Система координат SVG

Прямоугольник позиционируется с помощью атрибутов x и y, которые отсчитываются от верхнего левого угла SVG-холста. Ось x растёт вправо, а ось y растёт вниз (то есть большее значение y перемещает фигуру ниже на экране). Координаты выражаются в пользовательских единицах, которые по умолчанию соответствуют пикселям, но могут быть переопределены атрибутом viewBox. Основные атрибуты <rect>:

  • x — горизонтальное положение левого края прямоугольника. По умолчанию равно 0, если не указано.
  • y — вертикальное положение верхнего края прямоугольника. По умолчанию равно 0, если не указано.
  • width — ширина прямоугольника. По умолчанию равна 0, что делает прямоугольник невидимым, поэтому это значение нужно задавать почти всегда.
  • height — высота прямоугольника. Также по умолчанию равна 0 (невидимый).
  • rx — горизонтальный радиус скругления углов (необязательный).
  • ry — вертикальный радиус скругления углов (необязательный).

Пример элемента SVG <rect>:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="350" height="120">
      <rect width="250" height="110" style="fill:rgb(53, 153, 0);stroke-width:1;stroke:rgb(32, 33, 49)" />
    </svg>
  </body>
</html>
Попробуйте сами »

Разберём этот код:

  • Атрибуты width и height задают ширину и высоту прямоугольника.
  • Атрибут style задаёт некоторые CSS-свойства прямоугольника.
  • Свойство CSS fill задаёт цвет заливки прямоугольника.
  • Свойство CSS stroke-width задаёт толщину границы прямоугольника.
  • Свойство CSS stroke задаёт цвет границы прямоугольника.

Атрибуты представления и CSS

Стили fill, stroke и stroke-width, приведённые выше, можно также записать как атрибуты представления непосредственно на элементе, вместо использования атрибута style. Два приведённых ниже фрагмента равнозначны:

<!-- Using a CSS style attribute -->
<rect width="250" height="110"
      style="fill:green;stroke:darkgray;stroke-width:5" />

<!-- Using presentation attributes -->
<rect width="250" height="110"
      fill="green" stroke="darkgray" stroke-width="5" />

Атрибуты представления удобны и читаемы, однако имеют наименьший приоритет: любое совпадающее правило CSS (в таблице стилей или атрибуте style) переопределяет их. Используйте атрибуты представления для простых статических фигур, а CSS — когда хотите повторно использовать стили или изменять их при наведении. Подробнее о границах читайте в разделе SVG stroking.

Пример элемента SVG <rect> с атрибутами x и y:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="400" height="250">
      <rect x="80" y="50" width="180" height="180" style="fill:lightcoral;stroke:purple;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
      Sorry, inline SVG isn't supported by your browser.  
    </svg>
  </body>
</html>
Попробуйте сами »

Разберём приведённый выше код:

  • Атрибут x задаёт положение левого края прямоугольника.
  • Атрибут y задаёт положение верхнего края прямоугольника.
  • По умолчанию, если x и y не указаны, они принимают значение 0.
  • Свойство CSS fill-opacity задаёт непрозрачность цвета заливки.
  • Свойство CSS stroke-opacity задаёт непрозрачность цвета обводки.

Пример элемента SVG <rect> со свойством CSS opacity:

<!DOCTYPE html>
<html>
  <body>
    <svg width="400" height="180">
      <rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
      Sorry, inline SVG is not supported by your browser.  
    </svg>
  </body>
</html>
Попробуйте сами »

Разберём приведённый выше код:

  • Свойство CSS opacity задаёт прозрачность всего прямоугольника — как заливки, так и обводки вместе — где 1 означает полную непрозрачность, а 0 — полную прозрачность.
  • Это отличается от предыдущего примера: fill-opacity и stroke-opacity делают заливку и границу прозрачными независимо друг от друга, тогда как opacity применяется ко всему элементу как единому целому (поэтому перекрывающиеся обводка и заливка смешиваются с тем, что находится за фигурой, а не друг с другом).

Пример элемента SVG <rect> с атрибутами rx и ry:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="350" height="240">
      <rect x="70" y="50" rx="30" ry="30" width="170" height="170" style="fill:green;stroke:darkgray;stroke-width:5;opacity:0.7" />
      Sorry, inline SVG isn't supported by your browser.
    </svg>
  </body>
</html>
Попробуйте сами »

Разберём приведённый выше код:

  • Атрибут rx задаёт горизонтальный радиус скругления углов прямоугольника.
  • Атрибут ry задаёт вертикальный радиус скругления углов прямоугольника.

Правило копирования rx/ry (важный нюанс): если задан только один из этих атрибутов, браузер использует то же значение для другого. Таким образом, rx="30" без ry даёт углы, скруглённые на 30 в обоих направлениях — точно так же, как если бы вы написали rx="30" ry="30". Чтобы получить по-настоящему эллиптические (асимметричные) углы, необходимо задать разные значения для rx и ry. Если ни один из атрибутов не задан, углы остаются прямыми. Каждый радиус также ограничен максимальным значением, равным половине ширины прямоугольника (rx) или его высоты (ry).

Связанные главы по SVG

  • Введение в SVG — элемент <svg>, система координат и viewBox.
  • SVG stroking — управление границами с помощью stroke, stroke-width и штриховок.
  • SVG polygon — рисование многоугольников по списку точек.
  • Справочник по SVG — все элементы и атрибуты SVG в одном месте.

Практика

Практика
Если у SVG-прямоугольника задан rx='40', но атрибут ry не указан, как будут скруглены его углы?
Если у SVG-прямоугольника задан rx='40', но атрибут ry не указан, как будут скруглены его углы?
Was this page helpful?