SVG элементы: rect, circle, ellipse, line, polyline, polygon, path

19.11.15 NMitra

Прямоугольник rect
Круг circle
Эллипс ellipse
Отрезок line
Ломанная линия polyline и многоугольник polygon
Контур path
Что такое отрезок, ломанная, многоугольник — самое время вспомнить урок геометрии :)

Рассмотрены основные фигуры SVG [w3.org]: прямоугольник, круг, эллипс, отрезок, ломанная линия, многоугольник и контур path (команды M (m), Z (z), L (l), H (h), V (v), Q (q), T (t), C (c), S (s), A (a))

SVG прямоугольник `rect`

`width`		ширина прямоугольника	0
`height`		высота прямоугольника	0
`x`		положение левого верхнего угла прямоугольника по оси X	0
`y`		положение левого верхнего угла прямоугольника по оси Y	0
`rx`		x-закругление углов прямоугольника	0
`ry`		y-закругление углов прямоугольника	0

<svg>
  <rect width="100" height="50" x="0" y="0" rx="0" ry="0" />
</svg>

<!-- если указать только атрибут rx или только атрибут ry, то это рассматривается словно указаны оба этих атрибута с одним и тем же значением -->

Поддерживаемые единицы измерения

Если в вышеназванных атрибутах элемента rect значением является число, то такая запись соответствует числу, указанному в px [w3.org]

В атрибутах `width`, `height`, `x`, `y`, `rx`, `ry` поддерживаются
em	равен font-size родителя
ex	высота буквы «x»
px	пиксели
cm	сантиметры
mm	миллиметры
in	дюймы
pc	1/6 дюйма
pt	1/72 дюйма
%	проценты

<svg>
  <rect width="1cm" height="100%"/>
</svg>

SVG круг `circle`

`r`		радиус круга	0
`cx`		положение центра круга по оси X	0
`cy`		положение центра круга по оси Y	0

<svg>
  <circle r="50" cx="0" cy="0" />
</svg>

Поддерживаемые единицы измерения

Если в вышеназванных атрибутах элемента circle значением является число, то такая запись соответствует числу, указанному в px

В атрибутах `r`, `cx`, `cy` поддерживаются
em	равен font-size родителя
ex	высота буквы «x»
px	пиксели
cm	сантиметры
mm	миллиметры
in	дюймы
pc	1/6 дюйма
pt	1/72 дюйма
%	проценты

<svg>
  <circle r="5mm" cx="5mm" cy="5mm" />
</svg>

SVG эллипс `ellipse`

`rx`		радиус горизонтальной дуги эллипса	0
`ry`		радиус вертикальной дуги эллипса	0
`cx`		положение центра эллипса по оси X	0
`cy`		положение центра эллипса по оси Y	0

<svg>
  <ellipse rx="50" ry="25" cx="0" cy="0" />
</svg>

Поддерживаемые единицы измерения

Если в вышеназванных атрибутах элемента ellipse значением является число, то такая запись соответствует числу, указанному в px

В атрибутах `rx`, `ry`, `cx`, `cy` поддерживаются
em	равен font-size родителя
ex	высота буквы «x»
px	пиксели
cm	сантиметры
mm	миллиметры
in	дюймы
pc	1/6 дюйма
pt	1/72 дюйма
%	проценты

<svg>
  <ellipse rx="100%" ry="100%" cx="100%"/>
</svg>

SVG отрезок line

`x1`		положение начала линии по оси X	0
`y1`		положение начала линии по оси Y	0
`x2`		положение конца линии по оси X	0
`y2`		положение конца линии по оси Y	0

<svg>
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" />
</svg>

Поддерживаемые единицы измерения

Если в вышеназванных атрибутах элемента line значением является число, то такая запись соответствует числу, указанному в px

В атрибутах `x1`, `y1`, `x2`, `y2` поддерживаются
em	равен font-size родителя
ex	высота буквы «x»
px	пиксели
cm	сантиметры
mm	миллиметры
in	дюймы
pc	1/6 дюйма
pt	1/72 дюйма
%	проценты

SVG ломанная линия polyline и многоугольник polygon

`points`		координаты вершин ломанной перечислены через пробел, положение по оси X отделено от положения по осу Y запятой

<svg>
  <polyline points="10,10 50,100 100,100 140,10" stroke="red" stroke-width="3" />
</svg>

<svg>
  <polygon points="10,10 50,100 100,100 140,10" stroke="red" stroke-width="3" />
</svg>

<!-- polyline отличается от polygon только тем, что в последнем элементе необязательный атрибут stroke замкнут -->

Онлайн-сервис в тему: генератор точек-координат

SVG path

`d`	контур фигуры

moveto | M или m | начальная точка черты

Команда	Имя	Параметры	Расшифровка	Пример
M (абсолютная)	moveto	x,y	координаты точки	M10,10
m (относительная)	moveto	x,y	координаты точки	m10,10

	положение начала черты по оси X
	положение начала черты по оси Y

<!-- 
восемь записей равнозначны
M и m задаются абсолютными значениями
если после команды M не последует другой команды, то вторая пара координат рассматривается как L
если после команды m не последует другой команды, то вторая пара координат рассматривается как l
-->

<svg>
  <path d="M 10 10 100 10" stroke="black"/>
</svg>

<!-- можно координаты разделять запятой -->

<svg>
  <path d="M 10,10 100,10" stroke="black"/>
</svg>

<svg>
  <path d="M 10,10 L 100,10" stroke="black"/>
</svg>

<!-- можно не ставить пробел перед и/или после символа команды -->
<svg>
  <path d="M10,10L100,10" stroke="black"/>
</svg>

<svg>
  <path d="m10,10L100,10" stroke="black"/>
</svg>

<!--
предыдущие_абсолютные_координаты + относительные_координаты_команды_l = абсолютные_координаты_команды_L
10 + 90 = 100
10 + 0 = 10
-->

<svg>
  <path d="m10,10 90,0" stroke="black"/>
</svg>

<svg>
  <path d="m10,10l90,0" stroke="black"/>
</svg>

<svg>
  <path d="M10,10l90,0" stroke="black"/>
</svg>

Координаты относительных команд рассчитываются не относительно области SVG (40,40 ≠ 40%,40%), а относительно точки начала фрагмента линии (она же стоящая до команды точка)

<!-- две записи равнозначны -->

<svg width="110" height="110" style="background:#FFF5D7;">
    <path d="M40,40 100,80" stroke="red"/>
</svg>

<svg width="110" height="110" style="background:#FFF5D7;">
    <path d="m40,40 60,40" stroke="red"/>
</svg>

количество команд M

<svg>
  <path d="M10,10 50,10M50,50 90,50M90,90 130,90M130,130 170,130" stroke="black" fill="none"/>
</svg>

closepath | Z или z | соединение предшествующей точки с точкой команды M

Команда	Имя	Параметры	Расшифровка	Пример
Z	closepath	отсутствуют		Z
z	closepath	отсутствуют		z

не замкнутая линия

начальная точка совпадает с конечной

команда Z

<!-- две записи равнозначны -->

<svg>
  <path d="M10,10 50,100 100,100 140,10" stroke="red" stroke-width="10" />
</svg>

<svg>
  <path d="M10,10 50,100 100,100 140,10z" stroke="red" stroke-width="10" />
</svg>

lineto | L или l, H или h, V или v | соединение прямой линией текущей точки с предшествующей (аналог polyline)

Команда	Имя	Параметры	Расшифровка	Пример
L (абсолютная)	lineto	x,y	координаты конца отрезка	L50,100
l (относительная)	lineto	x,y	координаты конца отрезка	l40,90
H (абсолютная)	horizontal lineto	x	координата конца отрезка по оси X (по оси Y координата такая же как у предыдущей точки)	H150
h (относительная)	horizontal lineto	x		h100
V (абсолютная)	vertical lineto	y	координата конца отрезка по оси Y (по оси X координата такая же как у предыдущей точки)	V50
v (относительная)	vertical lineto	y		v-50

<!-- 
семь записей равнозначны
если после команды L не последует другой команды, то вторая пара координат рассматривается как L
если после команды l не последует другой команды, то вторая пара координат рассматривается как l
если после команды H не последует другой команды, то последующая координата рассматривается как H
если после команды h не последует другой команды, то последующая координата рассматривается как h
если после команды V не последует другой команды, то последующая координата рассматривается как V
если после команды v не последует другой команды, то последующая координата рассматривается как v
-->
<svg>
  <path d="M10,10 50,100 150,100 150,50" stroke="red" stroke-width="3" />
</svg>

<svg>
  <path d="M10,10L50,100L150,100L150,50" stroke="red" stroke-width="3" />
</svg>

<svg>
  <path d="M10,10L50,100H150V50" stroke="red" stroke-width="3" />
</svg>

<svg>
  <path d="m10,10 40,90 100,0 0,-50" stroke="red" stroke-width="3" />
</svg>

<!-- можно не ставить запятую и/или пробел перед отрицательным числом -->
<svg>
  <path d="m10,10 40,90 100,0 0-50" stroke="red" stroke-width="3" />
</svg>

<svg>
  <path d="m10,10l40,90l100,0l0-50" stroke="red" stroke-width="3" />
</svg>

<svg>
  <path d="m10,10l40,90h100v-50" stroke="red" stroke-width="3" />
</svg>

quadratic Bézier curveto | Q или q | квадратичная кривая Безье

Команда	Имя	Параметры	Расшифровка	Пример
Q (абсолютная)	quadratic Bézier curveto	x₁,y₁ x,y	координаты управляющей точки 1 и координаты конца кривой	Q50,25 190,70
q (относительная)	quadratic Bézier curveto	x₁,y₁ x,y	координаты управляющей точки 1 и координаты конца кривой	q40-45 180,0

	положение управляющей точки по оси X
	положение управляющей точки по оси Y

<!--
две записи равнозначны
d="M10,70 190,70" — это отрезок между двух точек
d="M10,70Q50,25 190,70" — это искривлённая линия между двух точек
-->

<svg>
  <path d="M10,70Q50,25 190,70" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,70q40-45 180,0" stroke="red" stroke-width="3"/>
</svg>

<!-- 
четыре записи равнозначны
если после команды Q не последует другой команды, то последующие четыре координаты рассматривается как Q
если после команды q не последует другой команды, то последующие четыре координаты рассматривается как q
-->

<svg>
  <path d="M10,50Q50,5 40,50Q80,5 70,50Q110,5 100,50Q140,5 130,50Q170,5 160,50Q200,5 190,50" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50Q50,5 40,50 80,5 70,50 110,5 100,50 140,5 130,50 170,5 160,50 200,5 190,50" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50q40-45 30,0q40-45 30,0q40-45 30,0q40-45 30,0q40-45 30,0q40-45 30,0" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50q40-45 30,0 40-45 30,0 40-45 30,0 40-45 30,0 40-45 30,0 40-45 30,0" stroke="red" stroke-width="3" fill="none"/>
</svg>

shorthand/smooth quadratic Bézier curveto | T или t | гладкая квадратичная кривая Безье

Команда	Имя	Параметры	Расшифровка	Пример
T (абсолютная)	shorthand/smooth quadratic Bézier curveto	x,y	координаты конца кривой	T290,150
t (относительная)	shorthand/smooth quadratic Bézier curveto	x,y	координаты конца кривой	t140,0

	положение управляющей точки Q по оси X
	положение управляющей точки Q по оси Y
	положение окончания кривой T по оси X
	положение окончания кривой T по оси Y

<!--
две записи равнозначны
вторая управляющая точка — это зеркальное отражение предшествующей управляющей точки Q(q) или T(t)
-->

<svg height="300px">
  <path d="M10,150Q50,105 150,150T290,150" stroke="red" stroke-width="3"/>
</svg>

<svg height="300px">
  <path d="M10,150Q50,105 150,150t140,0" stroke="red" stroke-width="3"/>
</svg>

<!--
четыре записи равнозначны
если после команды T не последует другой команды, то вторая пара координат рассматривается как T
если после команды t не последует другой команды, то вторая пара координат рассматривается как t
-->

<svg>
  <path d="M10,50Q50,5 40,50T70,50T100,50T130,50T160,50T190,50" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50Q50,5 40,50T70,50 100,50 130,50 160,50 190,50" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50Q50,5 40,50t30,0t30,0t30,0t30,0t30,0" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50Q50,5 40,50t30,0 30,0 30,0 30,0 30,0" stroke="red" stroke-width="3" fill="none"/>
</svg>

	положение управляющей точки T по оси X
	положение управляющей точки T по оси Y

<!--
четыре записи равнозначны
управляющая точка — это текущая точка, так как предшествующая команда не Q(q) или T(t)
-->

<svg>
  <path d="M10,70T50,25T190,70" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,70T50,25 190,70" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,70t40,-45t140,45" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,70t40,-45 140,45" stroke="red" stroke-width="3"/>
</svg>

curveto | C или c | кубическая кривая Безье

Команда	Имя	Параметры	Расшифровка	Пример
C (абсолютная)	curveto	x₁,y₁ x₂,y₂ x,y	координаты управляющей точки 1, координаты управляющей точки 2 и координаты конца кривой	C60,10 140,10 190,70
c (относительная)	curveto	x₁,y₁ x₂,y₂ x,y		c50-60 130-60 180,0

	положение 1-ой управляющей точки по оси X
	положение 1-ой управляющей точки по оси Y
	положение 2-ой управляющей точки по оси X
	положение 2-ой управляющей точки по оси Y

<!--
две записи равнозначны
d="M10,70 190,70" — это отрезок между двух точек
d="M10,70C60,10 140,10 190,70" — это искривлённая линия между двух точек
-->

<svg>
  <path d="M10,70C60,10 140,10 190,70" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,70c50-60 130-60 180,0" stroke="red" stroke-width="3"/>
</svg>

<svg height="230px">
  <g stroke="red" stroke-width="3">
    <path d="M10,50C10,10 140,10 140,50"/>
    <path d="M180,50C150,10 300,10 270,50"/>
    <path d="M10,120C140,90 10,90 140,120"/>
    <path d="M160,120C300,90 150,150 290,120"/>
    <path d="M10,190C120,190 150,120 130,190"/>
    <path d="M160,190C150,220 300,160 290,190"/>
  </g>
</svg>

<!--
если после команды C не последует другой команды, то следующие шесть координат рассматривается как C
если после команды c не последует другой команды, то следующие шесть координат рассматривается как c
-->

shorthand/smooth curveto | S или s | гладкая кубическая кривая Безье

Команда	Имя	Параметры	Расшифровка	Пример
S (абсолютная)	shorthand/smooth curveto	x₂,y₂ x,y	координаты управляющей точки 2 и координаты конца кривой	S240,195 290,150
s (относительная)	shorthand/smooth curveto	x₂,y₂ x,y	координаты управляющей точки 2 и координаты конца кривой	s90,45 140,0

	положение 1-ой управляющей точки по оси X
	положение 1-ой управляющей точки по оси Y
	положение 2-ой управляющей точки по оси X
	положение 2-ой управляющей точки по оси Y
	положение 4-ой управляющей точки по оси X
	положение 4-ой управляющей точки по оси Y
	положение окончания кривой S по оси X
	положение окончания кривой S по оси Y

<!--
две записи равнозначны
третья управляющая точка — это зеркальное отражение предшествующей управляющей точки C(c) или S(s)
-->

<svg height="300px">
  <path d="M10,150C60,105 100,105 150,150S240,195 290,150" stroke="red" stroke-width="3"/>
</svg>

<svg height="300px">
  <path d="M10,150C60,105 100,105 150,150s90,45 140,0" stroke="red" stroke-width="3"/>
</svg>

<!-- если предшествующая команда не C(c) или S(s), то команда S(s) работает также как команда Q(q) (если в том примере Q заменить на S результат не изменится) -->

<!--
четыре записи равнозначны
если после команды S не последует другой команды, то последующие четыре координаты рассматривается как S
если после команды s не последует другой команды, то последующие четыре координаты рассматривается как s
-->

<svg>
  <path d="M10,50S50,5 40,50S80,5 70,50S110,5 100,50S140,5 130,50S170,5 160,50S200,5 190,50" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50S50,5 40,50 80,5 70,50 110,5 100,50 140,5 130,50 170,5 160,50 200,5 190,50" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50s40-45 30,0s40-45 30,0s40-45 30,0s40-45 30,0s40-45 30,0s40-45 30,0" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50s40-45 30,0 40-45 30,0 40-45 30,0 40-45 30,0 40-45 30,0 40-45 30,0" stroke="red" stroke-width="3" fill="none"/>
</svg>

elliptical arc | A или a | дуга (часть) эллипса

Команда	Имя	Параметры	Расшифровка	Пример
A (абсолютная)	elliptical arc	rx ry x-axis-rotation large-arc-flag sweep-flag x y	радиус горизонтальной дуги, радиус вертикальной дуги, угол поворота относительно оси X, внутренняя или внешняя дуга, верхняя или нижняя дуга и координаты конца кривой	A40,50 0 0,0 150,150
a (относительная)	elliptical arc	rx ry x-axis-rotation large-arc-flag sweep-flag x y		a40,50 0 0,0 50,0

	радиус горизонтальной дуги эллипса
	радиус вертикальной дуги эллипса
	угол поворота относительно оси X
0 1	внутренняя или внешняя дуга (не имеет значения, если расстояние между начальной и конечной точками больше двойного радиуса)
0 1	верхняя или нижняя дуга
	положение окончания кривой по оси X
	положение окончания кривой по оси Y

<!-- две записи равнозначны -->

<svg height="300px">
  <path d="M100,150 A40,50 0 0,0 150,150" stroke="red" stroke-width="3"/>
</svg>

<svg height="300px">
  <path d="M100,150 a40,50 0 0,0 50,0" stroke="red" stroke-width="3"/>
</svg>

<!--
если после команды A не последует другой команды, то следующие семь значений рассматривается как A
если после команды a не последует другой команды, то следующие семь значений рассматривается как a
-->

<svg>
  <g stroke="blue" stroke-width="2">
    <path d="M110,70 h-50 a50,50 0 1,0 50-50z" fill="red"/>
    <path d="M100,60 v-50 a50,50 0 0,0-50,50z" fill="yellow"/>
  </g>
</svg>

P.S. сложные фигуры стоит рисовать в SVG редакторах. Полученный код можно оптимизировать (убрать ненужные пробелы). Для этого также разработаны специальные программы. Так как дизайн и я вещи довольно несовместимые, то в SVG меня интересуют в первую очередь простые динамические отзывчивые фигуры: посетитель нажал на элемент, тот изменил свой цвет, форму, что-то ещё. С помощью него их проще сделать, чем с помощью только HTML+CSS.

в f t

наверх ↑

14 комментариев:

MAX Ivanov: Вообще любые векторные элементы нужно делать в специальных программах ВИЗУАЛЬНО!! а не херней заниматься как здесь.
NMitra: Я не спорю, см. P.S. :) Но.
Во-первых, есть примитив, как например, тут http://shpargalkablog.ru/2015/11/point-line-straight-ray-segment.html
Во-вторых, для того, чтобы работать с SVG с помощью JS, пригодится понимание отчего что меняется
Космо Мизраил Горыныч: Прекрасный SVG-оптимизатор с дружественным интерфейсом: https://jakearchibald.github.io/svgomg/
Постоянно им пользуюсь.

>для того, чтобы работать с SVG с помощью JS, пригодится понимание отчего что меняется.
Абсолютно поддерживаю.
А ещё создание путей в новых спецификациях canvas повторяет SVG-стандарт (имеется ввиду синтаксис значения атрибута d), что немаловажно и, разумеется, очень полезно.
NMitra: Спасибо за инструмент. Пользовался программой автоматического заполнения форм? Какую посоветуешь для http://etest.asurso.ru/schoolInquiry ?
Космо Мизраил Горыныч: Программы? Не-е-ет, только яваскрипт, только хардкор :D
Я настолько заядлый кодер, что мне проще накидать сотенку строк кода, нежели искать какие-либо проги и настраивать их. В систему тестирования местного розлива, кстати, только так и заливаем — всё через свои скрипты и букмарклеты) Мы заливаем по 5+ тестов в день (сколько придумать успеют), а отдел тестирования в офигее от нашей скорости.

! Кстати, только сейчас заметил, что последний редактор с аркой убивает последнюю картинку с круговой диаграммкой.
NMitra: Не получается эмитировать поведение посетителя, а
document.querySelectorAll('input')[0].value = 'текст';
не срабатывает.
Космо Мизраил Горыныч: document.getElementById('municipality-select').value = 'e60c713e-1da3-430e-aaa8-a5480156c512';
document.getElementsByTagName('form')[0].submit();

/* - - - - ожидание прогрузки страницы. Я обычно делаю заполняемую форму как дочерний ифрейм и слушаю его событие 'load' - - - - */

document.getElementById('applicant-fname').value = "Мизраил";
document.getElementById('applicant-lname').value = "Космо";

/* Прочие заполнения */
/* В конце надо будет вызвать событие изменения поля, придётся использовать небольшие костыльки: */

var event = document.createEvent('Event');
event.initEvent('change', true, true);
document.getElementById('applicant-lname').dispatchEvent(event); /* на "почитать": https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events */

/* Если всё заполнено, то отобразится следующая часть формы. Далее — по аналогии. */
Космо Мизраил Горыныч: А вот и редактор SVG-линий появился, новинка! http://anthonydugois.com/svg-path-builder/
NMitra: Угу, я тоже пришла к createEvent :) Кстати, молодцы на том сайте, несколько ступеней защиты
А это хорошая мысль: потихоньку собрать редакторы в одном месте. Раньше я мимо ушей их пропускала
Великий Царь: NMitra, а куда это все можно применить? Выглядит все круто, но непонятно для чего. SVG это язык такой графический что-ли, но в веб-инженерии его куда можно пристроить и стоит ли его поучить?
NMitra: О, я также думала. Зачем он мне? Я рисовать точно не буду. Но на SVG проще сделать то, что можно сделать только на HTML+CSS. Всякие графики, например. Тот же текст по кругу проще сделать http://shpargalkablog.ru/2013/04/dial.html У SVG и у canvas похожее действие. В основном SVG используют для изображения иконок. Только с фигурами, наверно, и возникнут проблемы, потому что все остальные элементы те же, что у CSS.

Можете сделать также как я: мельком просматривать публикации, а когда понадобится, начать разбираться. Грубо говоря, я знала, что есть SVG и приблизительно что он умеет. Но как он работает стала смотреть, когда это понадобилось.
Космо Мизраил Горыныч: Много для чего можно его использовать. В частности, для создания сложной анимации, для вёрстки дизайнов с непрямоугольными формами, для более сложных эффектов и обработок блоков (в т.ч. и фотографий). В конце концов, для более качественных иконок, поддерживающих анимацию.
Всё, что можно состряпать, скажем, в Adobe Illustrator, можно сохранить в SVG и получить редактируемый шаблон.

Кучу всяких красявостей, сделанных с использованием SVG, можно найти в записях с соответствующим тегом на Codrops - http://tympanus.net/codrops/tag/svg/
NMitra: До сих пор терзают смутные сомнения: а нужны ли это красивости? Особенно в условиях сотовых телефонов. Выглядит, конечно, эффектно.
Космо Мизраил Горыныч: Имхо, сейчас везде нужна анимация, и особенно на телефонах. СВГ - это удобный, простой и производительный для браузеров вариант.
А кроме анимации, всё по-своему специфично для каждого проекта.

SVG элементы: rect, circle, ellipse, line, polyline, polygon, path

SVG прямоугольник rect

Поддерживаемые единицы измерения

SVG круг circle

Поддерживаемые единицы измерения

SVG эллипс ellipse

Поддерживаемые единицы измерения

SVG отрезок line

Поддерживаемые единицы измерения

SVG ломанная линия polyline и многоугольник polygon

SVG path

moveto | M или m | начальная точка черты

closepath | Z или z | соединение предшествующей точки с точкой команды M

lineto | L или l, H или h, V или v | соединение прямой линией текущей точки с предшествующей (аналог polyline)

quadratic Bézier curveto | Q или q | квадратичная кривая Безье

shorthand/smooth quadratic Bézier curveto | T или t | гладкая квадратичная кривая Безье

curveto | C или c | кубическая кривая Безье

shorthand/smooth curveto | S или s | гладкая кубическая кривая Безье

elliptical arc | A или a | дуга (часть) эллипса

14 комментариев:

SVG прямоугольник `rect`

SVG круг `circle`

SVG эллипс `ellipse`