Кривая вывезет
А что насчет кривых? Тут все не так просто.
Здесь нам придется изучить, наверное, самый главный и сложный svg-элемент — path. По существу, все основные примитивы являются частным случаем этого суперэлемента. <path> определяет последовательность линий и кривых (маршрут), записанных в компактной форме. Все этапы нелегкого пути, то есть данные для построения линии, содержатся в атрибуте d (data) и состоят из однобуквенных команд, таких как m (moveto) или l (lineto), за которыми следуют их аргументы — координаты для рисования и перемещения. Вот все эти команды:
|
Команда |
Аргументы |
Описание |
|
M (moveto) |
X, y |
Перемещение курсора в заданную точку (x, y) без рисования |
|
M (moveto) |
X, y |
Перемещение курсора в заданную точку (x, y) относительно исходной, без рисования |
|
L (lineto) |
X, y |
Рисование линии до заданной точки (x, y) |
|
L (lineto) |
X, y |
Рисование линии до заданной точки (x, y) относительно исходной |
|
H (horizontal lineto) |
X |
Рисование горизонтальной линии до х с сохранением текущей вертикальной координаты |
|
H (horizontal lineto) |
X |
Рисование горизонтальной линии до х относительно исходной позиции с сохранением текущей вертикальной координаты |
|
V (vertical lineto) |
Y |
Рисование вертикальной линии до y с сохранением текущей горизонтальной координаты |
|
V (vertical lineto) |
Y |
Рисование вертикальной линии до y относительно исходной позиции с сохранением текущей горизонтальной координаты |
|
C (curveto) |
X1,y1 x2,y2 x, y |
Рисование кубической кривой Безье с текущей позиции до (x, y), аргументы x1,y1 x2,y2 — координаты контрольных точек |
|
C(curveto) |
X1,y1 x2,y2 x, y |
Все то же, что и C, но теперь координаты отсчитываются от исходной позиции |
|
S (smooth curveto) |
X2,y2 x, y |
Рисование кубической кривой Безье с текущей позиции до (x, y), аргументы x2,y2 — координаты конечной контрольной точки, начальная контрольная точка — конечная контрольная точка предыдущей кривой |
|
S (smooth Curveto) |
X2,y2 x, y |
Все то же, что и S, но теперь координаты отсчитываются от исходной позиции |
|
Q (quadratic Bezier Curveto) |
X1,y1 x, y |
Рисование квадратичной кривой Безье с текущей позиции до (x, y), аргументы x1,y1 — координаты контрольной точки |
|
Q (quadratic Bezier curveto) |
X1,y1 x, y |
Все то же, что и Q, но теперь координаты отсчитываются от исходной позиции |
|
T (smooth quadratic Bezier curveto) |
X, y |
Рисование квадратичной кривой Безье с текущей позиции до (x, y), контрольная точка — конечная контрольная точка предыдущей кривой |
|
Команда |
Аргументы |
Описание |
|
T (smooth quadratic Bezier curveto) |
X, y |
Все то же, что и T, но… ну вы поняли, да? |
|
A (elliptical arch) |
Rx, ry X-axis-rotation Large-arch-flag, Sweepflag X, y |
Дуга, проведенная с текущей позиции до (x, y), rx, ry — координаты радиуса, x-axis-rotation — поворот дуги относительно оси x. Large-arch-flag теоретически определяет форму дуги, но на практике не используется. Может быть равен 1 или 0, это ни на что не влияет. Sweep-flag определяет, куда именно будет направлена дуга |
|
A (elliptical arch) |
Rx, ry X-axis-rotation Large-arch-flag, Sweepflag X, y |
Ну, понятно, да? |
|
Z (closepath) |
Замыкает линию, соединяя текущее положение с начальной точкой |
|
|
Z (closepath) |
То же самое, что и Z. Просто то же самое |
Как видите, тут собран очень мощный инструментарий, который требует некоторого времени на освоение. Попробуем его применить, чуть изменив примеры из руководства:
<svg width="12cm" height="5.25cm" viewBox="0 0 1200 400" xmlns="Http://www. w3.org/2000/svg" version="1.1"
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z" fill="red" stroke="blue" stroke-width="5" />
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z" fill="yellow" stroke="blue" stroke-width="5" />
<path d="M600,350 l 50,-25
A25,25 -30 0,1 50,-25 l 50,-25
A25,50 -30 0,1 50,-25 l 50,-25
A25,75 -30 0,1 50,-25 l 50,-25
A25,100 -30 0,1 50,-25 l 50,-25" fill="none" stroke="red" stroke-width="5" />
<path d="M200,410 Q400,50 600,300 T1000,300 fill="none" stroke="green" stroke-width="10" />
</svg>
Результат — на рис. 57.
Рис. 57. SVG-кривые
Теперь, вооружившись этими знаниями, мы можем повторить рожицу из главы про canvas в честном векторном формате:
<svg width="800px" height="600px">
<circle cx="150" cy="150" r="100" style="stroke: green; fill: none;stroke-width : 10" />
<circle cx="110" cy="114" r="12" stroke="green" fill="green" />
<circle cx="190" cy="114" r="12" stroke="green" fill="green" />
<line x1="150" y1="130" x2="150" y2="180"
Style="stroke: green; stroke-width:10; stroke-linecap: round;" /> <path d="M190,200 A100,220 0 0,1 110,200"
Style="stroke:green; stroke-width:10; fill:none; stroke-linecap: round; "/>
</svg>
Может, и не совсем точно (рис. 58), но я не стремился к «портретному» сходству. Зато посмотрите, насколько это проще и экономней! Впрочем, о сравнении применимости canvas и SVN мы еще поговорим. Пока попробуем сделать код еще компактнее. Уже упоминалось то, что содержимое атрибута style тут не совсем соответствует обычному CSS, а является записью атрибутов. Отказываться от этих слов я не собираюсь, но вот еще одна общая черта — эти «стили», как и обычные css, могут быть представлены внутренней или внешней таблицей. Преобразуем код рожицы, внедрив такую сущность:
<svg width=”800px” height=”600px” >
<defs>
<style type=”text/css”>
<![CDATA[
Circle, line, path{ stroke: violet: fill: violet: stroke-linecap: round:
}
]]>
</style>
</defs>
<circle cx=”150” cy=”150” r=”100” style=”fill: none;stroke-width : 10” />
<circle cx=”110” cy=”114” r=”12” />
<circle cx=”190” cy=”114” r=”12” />
<line x1=”150” y1=”130” x2=”150” y2=”180” style=” stroke-width:10;” />
<path d=”M190,200 A100,220 0 0,1 110,200” style=” stroke-width:10; fill:none; ”/>
</svg>
Рис. 58. SVG-рожица
Правда, так лучше?
Таблица стилей помещена в элемент <defs>, который предназначен для группировки объектов с целью повторного использования их сочетания. Заключать стили в такой контейнер — просто хороший тон. Помимо группировки, он скрывает визуальное отображение элементов.
Добавить комментарий