Поиск…
Вступление
Пути - самый гибкий элемент SVG. Путь представляет собой ряд кубических или квадратичных кривых Безье, расположенных в соединенных сплайнах. Путь может быть открытым или закрытым в петлю, или он может быть сложным с несколькими подкомпонентами. Если путь не является простым, правило заполнения важно при определении того, какие области находятся внутри или вне пути.
Пути обычно генерируются автоматическими редакторами. Обычно для шрифтов используются квадратичные пути и кубические пути для иллюстраций.
параметры
| Атрибуты / параметры | Описание |
|---|---|
| d | Определяет последовательность команд рисования, которые создают форму. например d = "M 50,60 L50,60". Команды рисования в верхнем регистре обозначают абсолютные координаты. Строчные команды рисования обозначают относительные координаты. |
| (...) | Команды рисования |
| м / М | Переместить текущее положение чертежа в положение XY d = "M XY" |
| л / л | Нарисуйте линию на X, Y d = "L XY" |
| V / V | Нарисуйте вертикальную линию до Y d = "V Y" |
| ч / Н | Нарисуйте горизонтальную линию до X d = "H X" |
| а / А | Нарисуйте дугу на X, Y с подразумеваемым радиусом Rx и Ry и поворот, заданный вращением по оси X. Большие дуги и флаги развертки выбирают, какая из 4 возможных дуг, которые удовлетворяют этим ограничениям, должны быть нарисованы. d = «A Rx Ry Ось-поворот оси (градусы) флаг флага (0/1) большой дуги (0/1) X, Y". |
| Q / Q | Нарисуйте квадратичную кривую Безье на X, Y, используя контрольную точку X1Y1 d = "X1Y1 X Y" |
| T / T | Нарисуйте сокращенную квадратичную кривую безье (контрольная точка вычисляется как отражение контрольной точки предыдущей команды рисования q / Q через текущую позицию чертежа) |
| C / C | Нарисуйте кубическую кривую безье для X, Y, используя контрольные точки X1, Y1 и X2, Y2 d = "C X1Y1, X2Y2, XY" |
| S / S | Нарисуйте сокращенную кубическую беззерновую кривую (первая контрольная точка рассчитывается как отражение второй контрольной точки предыдущей команды рисования c / C через текущую позицию чертежа). |
| - z / Z | Закройте путь, вычерчивая строку для начала пути (или pathsegment, если другой z использовался ранее) |
| (...) | (конец списка) |
| длина пути | (Необязательно) Позволяет автору указать номинальную длину пути, которая будет использоваться для калибровки в других вычислениях, например, для текста вдоль пути |
| Параметры обводки | общий среди всех элементов формы и рисунка |
| Инсульт | Цвет пути |
| Ход ширина | Ширина пути |
замечания
Подробную информацию о элементе path SVG можно найти в Рекомендации W3C для SVG .
Нарисуйте диагональную синюю линию с помощью команды L path
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 L 100,50" stroke="blue" stroke-width="5" />
</svg>
Результат:
Нарисуйте горизонтальную оранжевую линию, используя команду рисования H
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 H 200" stroke="orange" stroke-width="5" />
</svg>
Результат:
Нарисуйте красный крест, используя команды пути l (относительная линия)
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 l 90,90 M 100,10 l -90,90" stroke="red" stroke-width="10" />
</svg>
Результат:
Нарисуйте вертикальную зеленую линию, используя команду V path
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M 10,10 V 200" stroke="green" stroke-width="5" />
</svg>
Результат:
Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow