81 lines
4.1 KiB
Markdown
81 lines
4.1 KiB
Markdown
|
---
|
|||
|
|
title: SVG Shapes
|
|||
|
|
localeTitle: SVG Shapes
|
|||
|
|
---
|
|||
|
|
## SVG Shapes
|
|||
|
|
|
|||
|
|
С помощью SVG можно создавать несколько форм. Чертеж SVG может использовать и объединять семь фигур: Путь, Прямоугольник, Круг, Эллипс, Линия, Полилиния и Многоугольник.
|
|||
|
|
|
|||
|
|
### Дорожка
|
|||
|
|
|
|||
|
|
Элемент `path` является наиболее часто встречающимся и обычно генерируется программами, предназначенными для экспорта SVG-кода.
|
|||
|
|
|
|||
|
|
```svg
|
|||
|
|
<path d="M2 1 h1 v1 h1 v1 h-1 v1 h-1 v-1 h-1 v-1 h1 z" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
В приведенном выше примере `path` генерирует символ «плюс» (+) при использовании внутри чертежа SVG. Элементы `path` SVG не создаются вручную, а сгенерированы с помощью программ проектирования, которые могут манипулировать векторной графикой, например Illustrator или Inkscape.
|
|||
|
|
|
|||
|
|
### Прямоугольник
|
|||
|
|
|
|||
|
|
Прямоугольник `rect` рисует прямоугольник на экране и принимает шесть атрибутов.
|
|||
|
|
|
|||
|
|
```svg
|
|||
|
|
<rect x="0" y="0" width="100" height="50" rx="10" ry="10" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
`x` и `y` назначают положение верхнего левого угла прямоугольника, а `width` и `height` определяют размер прямоугольника. `rx` и `ry` назначают радиус углов прямоугольника, аналогично свойству CSS border-radius.
|
|||
|
|
|
|||
|
|
### Круг
|
|||
|
|
|
|||
|
|
Круг элемент `circle` принимает три атрибута.
|
|||
|
|
|
|||
|
|
```svg
|
|||
|
|
<circle cx="100" cy="100" r="50" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
`cx` и `cy` назначают положение центра круга, а `r` присваивает радиус (размер) круга.
|
|||
|
|
|
|||
|
|
### Эллипс
|
|||
|
|
|
|||
|
|
Элемент эллипса, `ellipse` , подобен элементу `circle` за исключением того, что радиус делится на два атрибута.
|
|||
|
|
|
|||
|
|
```svg
|
|||
|
|
<ellipse cx="100" cy="100" rx="50" ry="20" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Опять же, `cx` и `cy` назначают положение центра эллипса, а теперь `rx` и `ry` назначают горизонтальный и вертикальный радиус эллипса соответственно. Большой `rx` даст «толстый» эллипс, а более крупный `ry` даст более тонкий эллипс. Если `rx` и `ry` равны, он образует круг.
|
|||
|
|
|
|||
|
|
### Линия
|
|||
|
|
|
|||
|
|
Элемент `line` прост и принимает четыре атрибута.
|
|||
|
|
|
|||
|
|
```svg
|
|||
|
|
<line x1="0" x2="100" y1="50" y2="70" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Атрибуты `x1` и `y1` назначают первую точку строки, а атрибуты `x2` и `y2` назначают вторую точку линии.
|
|||
|
|
|
|||
|
|
### Ломаная
|
|||
|
|
|
|||
|
|
`polyline` - это серия связанных прямых линий, назначенных в одном атрибуте.
|
|||
|
|
|
|||
|
|
```svg
|
|||
|
|
<polyline points="0 100, 50 70, 60 40, 20 0" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Атрибут `points` присваивает список точек, каждая точка разделяется запятой.
|
|||
|
|
|
|||
|
|
### многоугольник
|
|||
|
|
|
|||
|
|
Элемент `polygon` также представляет собой серию связанных прямых линий, но в этом случае последняя строка автоматически соединяется с начальной точкой.
|
|||
|
|
|
|||
|
|
```svg
|
|||
|
|
<polygon points="0 100, 50 70, 60 40, 20 0" />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Этот пример будет иметь ту же форму, что и выше, чем `polyline` , но он будет нарисовать дополнительную строку, чтобы «закрыть» ряд строк.
|
|||
|
|
|
|||
|
|
## Больше информации
|
|||
|
|
|
|||
|
|
MDN Документация: [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes)
|