Элемент RECT

rect элемент является базовой формой SVG, используемой для создания прямоугольников, основанных на позиции угла и их ширины и высоты. Он также может быть использован для создания прямоугольников со скругленными углами.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
</svg>

Расположение прямоугольника отосительно родительского элемента определяется атрибутами xи y.

Размер прямоугольника определяется атрибутами widthи height.

Свойства rect элемента

Закругленные углы

Атрибуты rxи ryопределяют, каким будет закругление углов. rxопределяет, насколько широким будет скругление и ry - насколько высоким.

Приемер

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect x="10" y="10" rx="15" ry="25" height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
        </svg>

Stroke

Атрибут strokeопределяет цвет контура прямоугольника, по умолчанию none.

Граница контура может быть пунктирной, для этого с помошью параметра stroke-dasharrayможно задать длину пунктира и растояние между ними

Fill

Цвет заливки определяется свойством fill

Вы также можете сделать заполнение прозрачным с помощью fill-opacity.

Пример

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" width="100" height="100" style="stroke: #009900; stroke-width: 3; fill: #33ff33;"/>
    <rect x="120" y="10" width="100" height="100" style="stroke: #009900; stroke-width: 3; stroke-dasharray: 10 5; fill: none;"/>
<svg>

  1. SVG
  2. HTML