Ссылка на статью в формате MarkDown для Curl, кодировка RU.UTF-8
SVG Пути (линии Безье, кривые)
Адрес страницы: nixscript.ru/svg3
И так, в предыдущих статьях (svg1 и svg2) я вас познакомил со структурой файла и с простыми фигурами. Настало время посмотреть на пути.
Пути - замечательный инструмент рисования. С их помощью можно изобразить что угодно. К примеру, можно изобразить прямоугольник:
<path d="m10 10l20 0l0 20l-20 0z" />А можно и круг:
<path d="m30 10c15 0 15 25 0 25c-15 0 -15 -25 0 -25z" />... можно треугольник ...
<path d="m10 10l20 0l-10 20z" />И много чего ещё. Хоть картину Сальвадора Дали "Течение времени", лишь бы терпения и фантазии хватило.
Синтаксис
Как вы уже заметили, path - очень сложный элемент, в плане кода. Он имеет сложные правила.
В атрибуте d используются несколько опций:
- M - задаёт первую точку пути, координаты X и Y
- L - прямая линия, координаты последней точки линии (X,Y). Первой точкой является последняя точка предыдущей опции.
- H - прямая горизонтальная линия, координата X.
- V - прямая вертикальная линия, координата Y.
- C, S, Q, T - дуга (арка), с этими опциями всё сложно...
- z - опция замыкания пути. Последняя точка соединяется с первой прямой линией.
Ну так вот... Сейчас про базовое, а потом конкретнее...
Все эти опции могут быть указаны заглавной буквой или маленькой (всегда путаю прописная/строчная, поэтому избегаю употреблять эти термины). Заглавная (большая) буква означает, что координаты ей надо указывать от верхнего левого угла. Причем положительная координата Y означает направление вниз, а со знаком минус - вверх от верхнего края изображения. Или вправо/влево от левого края рисунка, в случае с координатой X.
Маленькая буква означает относительная. То есть, ей нужно передать координаты на сдвиг от текущей точки.
К примеру, прямая вертикальная линия длиной в 10 пикселей, начиная с 5-го пикселя от верхнего края рисунка. Сначала абсолютные координаты (заглавная буква), затем то же самое, но относительные (маленькая буква).
<path d="M0 5V15" stroke="#000" stroke-width="0.5" />
<path d="m0 5v10" stroke="#000" stroke-width="0.5" />Результат один и тот же, но координаты разные. В первом случае, пришлось указать 15, хотя длина линии нужна в 10 пикселей. Потому, что нужно учитывать и расстояние от координаты 0.
Оба варианта удобны в своих ситуациях. Синтаксис допускает смешивать варианты. То есть, начать мы можем с маленькой M, а закончить заглавной L. Или вообще устроить мешанину БукАВеГ. ))) Главное, чтобы после буквы были указаны координаты с учётом правильной точки отсчёта.
C, S, Q, T
Теперь о сложном. Это жесть. Самый простой способ задавать координаты для сложного рисунка - миллиметровая бумага. Незная про новое поколение, но те, кто родился до перестройки/гласности, прекрасно понимают, какую бумагу я имею ввиду. Она в клеточку, и размер одной клеточки = 1мм². И я не стану подробно расписывать, как пользоваться этими четырьмя опциями. Не смогу правильно это сделать, к тому же есть масса статей на эту тему. Вот, к примеру, по которой я понял, как работать с этими опциями: webbeaver.ru/future/svg-path-syntax/
Создайте тестовый файлик, вбейте код, попробуйте, почувствуйте... В любом случае, вы либо поймёте, либо пользуйтесь InkScape-ом.
Заключение (по кривым)
Для того, чтобы в терминале сложные кривые рисовать, надо быть отмороженным. )))
Делайте проще, создавайте шаблон в InkScape, сохраняйте в оптимизированном SVG, а потом меняйте всё необходимое в коде. Об этом в следующей части.
Автор: grigruss 14.11.2019
Статья написана в формате MarkDown и сконвертирована в HTML с помощью скрипта Parsedown.