SVG <rect>

Формы SVG

SVG предоставляет некоторые предопределенные элементы форм, которые могут использовать разработчики:

• Прямоугольник <rect>
• Круг <circle>
• Эллипс <ellipse>
• Прямая линия <line>
• Ломаная линия <polyline>
• Многоугольник <polygon>
• Путь <path>

Следующие главы начнутся с элемента rect и будут объяснять каждый элемент.

SVG прямоугольник - <rect>

Пример 1

<rect> Элемент используется для создания прямоугольников и их вариаций в виде фигур:

Это код SVG:

<svg width="400" height="110">
  <rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />

</svg>

Попробуйте сами

• Атрибуты width и height элемента <rect> определяют ширину и высоту прямоугольника
• Атрибут style используется для определения CSS-атрибутов прямоугольника
• Атрибут fill CSS определяет цвет заливки прямоугольника
• Атрибут border-width CSS определяет ширину рамки прямоугольника
• Атрибут stroke CSS определяет цвет рамки прямоугольника

Пример 2

Давайте посмотрим на другой пример, включающий новые атрибуты:

Это код SVG:

<svg width="400" height="180">
  <rect x="50" y="20" width="150" height="150"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />

</svg>

Попробуйте сами

• Атрибут x определяет левое положение прямоугольника (например, x="50" разместит прямоугольник на расстоянии 50 px от левого внешнего поля)
• Атрибут y определяет верхнее положение прямоугольника (например, y="20" разместит прямоугольник на расстоянии 20 px от верхнего внешнего поля)
• Атрибут fill-opacity CSS определяет степень прозрачности цвета заливки (допустимый диапазон: от 0 до 1)
• Атрибут border-opacity CSS определяет степень прозрачности цвета обводки (допустимый диапазон: от 0 до 1)

Пример 3

Определяет степень прозрачности всего элемента:

Это код SVG:

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

</svg>

Попробуйте сами

• Атрибут opacity CSS определяет степень прозрачности всего элемента (допустимый диапазон: от 0 до 1)

Пример 4

Последний пример, создание прямоугольника с закругленными углами:

Это код SVG:

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />

</svg>

Попробуйте сами

• Комментарий к коду: