SVG rect element

SVG <rect> element отвечает за вывод самой простой из основных фигур – прямоугольника.

Аттрибут Описание
x, y координаты левого верхнего угла прямоугольника
width ширина прямоугольника
height высота прямоугольника
rx радиус закругления прямоугольника по оси абцисс
ry радиус закругления прямоугольника по оси ординат
style параметры оформления прямоугольника

На рисунке ниже в столбце “N1” показаны возможности оформления внешнего вида прямоугольников с помощью стилей <style>. В столбце “N2” – работа с закруглением углов прямоугольников.
svg rect element

Рис.1

Закругление углов прямоугольника

на рисунке Рис.1 в столбце “N2” показаны варианты закругления углов прямоугольника.

  • Рис.1 поз.6 радиус углов равный половине высоты прямоугольника превращает его в элипс.
  • Рис.1 поз.7 радиус углов равный половине высоты квадрата превращает его в круг.
    • Эффект тени, см. Рис.1, поз.8, достигается сдвигом на 10px вправо и вниз серого прямоугольника относительно основного голубого прямоугольника.
      ⇚ SVG polygon SVG circle element ⇛

Добавить комментарий