- Теория
- Теория
Рисуем прямоугольник
В SVG есть несколько способов нарисовать фигуру, для простых фигур есть свои теги.
Например, прямоугольник рисуется с помощью тега rect
. Код простого прямоугольника выглядит так:
<rect width="150" height="100"/>
Обратите внимание: все теги в SVG должны быть закрыты, то есть должно быть так: <rect .../>
или так: <rect ...></rect>
. Мы будем использовать первый способ.
Результат:
Атрибуты width
и height
управляют, соответственно, шириной и высотой фигуры. Значения можно задавать и в пикселях, и в процентах.
Для значений в пикселях после значения не нужно писать px
, потому что пиксели — единица измерения, используемая в SVG по умолчанию. Проценты рассчитываются относительно размеров всего SVG-изображения: горизонтальные значения относительно ширины, вертикальные — относительно высоты.
В современных браузерах размерами и положением фигур нельзя управлять через CSS, но эта возможность появится в будущем.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.