SVG <rect> element отвечает за вывод самой простой из основных фигур – прямоугольника.
|
1 2 |
<rect x="10" y="10" width="120" height="50" rx="5" ry="15" style="stroke:#006600; fill: #00cc00"/> |
| Аттрибут | Описание |
| x, y | координаты левого верхнего угла прямоугольника |
| width | ширина прямоугольника |
| height | высота прямоугольника |
| rx | радиус закругления прямоугольника по оси абцисс |
| ry | радиус закругления прямоугольника по оси ординат |
| style | параметры оформления прямоугольника |
На рисунке ниже в столбце “N1” показаны возможности оформления внешнего вида прямоугольников с помощью стилей <style>. В столбце “N2” – работа с закруглением углов прямоугольников.
Рис.1
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- поз.1 Заполнение прямоугольника красным цветом коэффициент прозрачности = 0.7 --> <rect x="30" y="50" width="120" height="50" style="fill-opacity: 0.7; fill: red;" /> <!-- поз.2 Заполнение цветом, добавляется рамка прямоугольника --> <rect x="30" y="140" width="120" height="50" style="fill:yellow; stroke-width:3; stroke: blue;"/> <!-- поз.3 Нет заполнения цветом, только рамка прямоугольника --> <rect x="30" y="230" width="120" height="50" style="fill:none; stroke-width:3; stroke: blue;"/> <!-- поз.4 Рамка прямоугольника, коэффициент прозрачности 0.4--> <rect x="30" y="320" width="120" height="50" style="fill:none; stroke-width:8; stroke: red; stroke-opacity:0.4;"/> |
Закругление углов прямоугольника
на рисунке Рис.1 в столбце “N2” показаны варианты закругления углов прямоугольника.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- поз.5 закругление углов прямоугольника радиусом 10px --> <rect x="350" y="50" width="120" height="50" rx="10" style="fill:teal; stroke-width:3; stroke: blue;" /> <!-- поз.6 закругление углов радиусом 25px равным половине высоты прямоугольника --> <rect x="350" y="140" width="120" height="50" rx="25" style="fill:yellow; stroke-width:3; stroke: blue;" /> <!-- поз.7 закругление углов квадрата радиусом 25px равным половине высоты прямоугольника --> <rect x="350" y="230" width="50" height="50" rx="25" style="fill:#EC4700; stroke-width:3; stroke: blue;" /> |
- Рис.1 поз.6 радиус углов равный половине высоты прямоугольника превращает его в элипс.
- Рис.1 поз.7 радиус углов равный половине высоты квадрата превращает его в круг.
|
1 2 3 4 5 6 7 |
<!-- поз.8 Прямоугольник выполняющий роль тени от основного прямоугольника --> <rect x="360" y="340" width="120" height="60" rx="5" style="fill:gray; fill-opacity: 0.7; " /> <!-- поз.8 основной рямоугольник --> <rect x="350" y="330" width="120" height="60" rx="5" style="fill:#437BEA; stroke-width:1; stroke: blue;" /> |
Эффект тени, см. Рис.1, поз.8, достигается сдвигом на 10px вправо и вниз серого прямоугольника относительно основного голубого прямоугольника.
⇚ SVG polygon SVG circle element ⇛