Флаги дуг SVG: правильная кривая с командой A

Два флага команды SVG A выбирают, какая дуга соединяет начальную и конечную точки. Задайте large-arc-flag равным 0 для короткого пути или 1 для длинного. Задайте sweep-flag равным 0 или 1, чтобы выбрать направление вдоль эллипса. Сохраняйте конечные точки и радиусы неизменными, меняйте только эти две цифры — и увидите все четыре варианта. Спецификация контуров SVG 2 определяет этот выбор из четырех дуг.

Это полезно, когда изогнутый край логотипа, кольцо значка или украшение интерфейса изгибается не в ту сторону после правки кода. Если исходник — PNG, векторизация сначала может дать редактируемые фигуры; команда A — отдельная намеренная правка геометрии.

Прочитайте семь значений после A

Абсолютная команда дуги имеет такой порядок:

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

rx и ry — радиусы эллипса. x-axis-rotation поворачивает этот эллипс в текущей системе координат. Каждый из двух флагов равен 0 или 1. Наконец, x y — конечная точка. Начало — текущая точка, оставленная предыдущей командой, часто M x y. Строчная a использует относительную конечную точку вместо абсолютной; руководство MDN по контурам объясняет формы команд.

Например, M70 370 A140 110 0 0 1 280 420 начинается в (70, 370), использует радиусы 140 и 110, оставляет эллипс без поворота, выбирает короткий путь с sweep 1 и заканчивается в (280, 420). Числа заданы в пользовательской системе координат SVG. Они не означают автоматически физический размер печати.

Посмотрите четыре возможные дуги

Мы отрисовали этот исходный образец из одного файла SVG. В каждой панели используются те же начало (70, 370), конец (280, 420), радиусы 140 110 и поворот 0. Меняются только флаги. Оранжевым отмечено начало, зеленым — конец. Это отрисовка наших собственных команд контуров в стиле браузерного отображения, а не результат преобразования PerfectVector.

Подписи «выше» и «ниже» описывают эти начало, конец и расположение координат. Это не универсальные значения 0 и 1. Другое расположение конечных точек или преобразованная группа могут переместить видимую дугу в другое место. Флаг sweep выбирает направление увеличения или уменьшения угла вдоль выбранного эллипса; в типичном viewBox SVG с осью y, направленной вниз, sweep 1 обычно выглядит как движение по часовой стрелке. Интерактивный редактор дуг SVG Tutorial удобен для наблюдения за сменой направления при сохранении других входных данных.

Чтобы воспроизвести одну панель, сохраните это как arc.svg и откройте в браузере:

<svg xmlns="http://www.w3.org/2000/svg"
     width="380" height="600" viewBox="0 0 380 600">
  <path d="M70 370 A140 110 0 0 1 280 420"
        fill="none" stroke="#1b64d8"
        stroke-width="12" stroke-linecap="round" />
  <circle cx="70" cy="370" r="9" fill="#ff704e" />
  <circle cx="280" cy="420" r="9" fill="#0c8078" />
</svg>

Меняйте только две цифры после поворота 0, используя таблицу выше. Если одновременно изменить радиус или конечную точку, уже нельзя будет определить, какая правка изменила путь.

Исправьте кривую, пошедшую не в ту сторону

1. Найдите сегмент. В значении d контура определите предшествующую начальную точку, команду A и ее конечную точку. Контур может содержать несколько дуговых сегментов; редактируйте только неверный.
2. Проверьте выбор длинного или короткого пути. Если небольшая кривая внезапно обходит почти весь эллипс, переключите large-arc-flag с 1 на 0. Если задуманный сегмент кольца превратился в короткое соединение, попробуйте 1.
3. Проверьте сторону или направление движения. Сохраняйте все остальное неизменным и переключите sweep-flag. Это часто перемещает дугу на другую сторону хорды между конечными точками.
4. Проверьте все изображение. Исправленный сегмент все еще может стыковаться с соседним под неудачным углом или выходить за viewBox. Откройте файл заново в нужном размере отображения, затем при необходимости измените соседнюю геометрию или холст.

Если ни одна пара флагов не дает нужный силуэт, проблема, вероятно, не во флаге. Радиусы и конечные точки определяют возможные эллипсы; флаги только выбирают среди них. Руководство NaN по дугам показывает, как изменение радиуса или конечной точки меняет базовый эллипс.

Поворот и ограничения радиусов

x-axis-rotation важен, когда rx и ry различаются: он поворачивает эллипс перед выбором дуги. При равных радиусах поворот круга не меняет его очертания. Для логотипа с наклонным овальным краем сначала попробуйте нужные радиусы и поворот, затем выберите флаги. Иначе можно выбрать правильную сторону неверного эллипса.

Примечания по реализации SVG 2 определяют особые случаи. Если любой радиус равен нулю, сегмент считается прямой линией. Если радиусы слишком малы для соединения конечных точек, средство отрисовки увеличивает их настолько, чтобы дуга стала возможной. Если начало и конец совпадают, дуговой сегмент пропускается. Эти правила объясняют, почему изменение флага иногда кажется безрезультатным. Они также означают, что сама отрисовка может не доказать использование введенных радиусов без коррекции.

Используйте трассированную кривую как отправную точку, а не формулу дуги

Растровый логотип может показывать четкую круговую границу, но восстановленный SVG может описывать ее сегментами Безье и опорными точками вместо явной команды A. Векторизатор изображений восстанавливает видимые фигуры; он не обязательно определяет исходный центр круга, радиусы или флаги дуги, выбранные дизайнером. Если исходный векторный оригинал существует, редактируйте его вместо повторной трассировки.

Когда есть только PNG или JPG, преобразуйте изображение в редактируемые векторные контуры с PerfectVector, проверьте восстановленный контур, затем решите, нужна ли точная геометрическая перерисовка. Для кольца значка измерьте нужный центр и радиусы в векторном редакторе и замените только этот изогнутый участок, если важна согласованная геометрия. Сохраните принятую трассировку для нерегулярного изображения, которое точный эллипс исказил бы. Наше руководство по редактированию SVG рассматривает выбор визуального редактора или точечной правки кода; руководство по очистке узлов помогает, когда трассированную кривую трудно менять.

Такое разделение работы важно: PerfectVector может помочь восстановить исходник только в растре в виде контуров, а задание точных параметров дуги и проверка стыков остаются дизайнерским решением. Не преобразуйте уже чистый SVG в PNG и не трассируйте его заново только ради смены флага.

Перед передачей SVG

• Сохраните копию исходного или принятого трассированного оригинала.
• Подтвердите начальную точку, конечную точку, радиусы, поворот и два значения флагов в таком порядке.
• Сравните выбранный путь при большом увеличении и в реальном размере использования.
• Проверьте стыки и пересечение длинным путем края viewBox.
• Откройте передаваемый SVG заново в целевом редакторе или браузере. Визуально правильный снимок экрана не доказывает, что получатель сможет редактировать контур как задумано.

Частые вопросы

Что означают флаги large-arc и sweep в SVG? Флаг large-arc выбирает короткую или длинную возможную дугу между двумя конечными точками. Флаг sweep выбирает направление движения сегмента вокруг эллипса. Вместе они выбирают среди четырех вариантов, когда геометрия не вырожденная.

Почему изменение флага SVG large-arc не дает видимого эффекта? Проверьте, не являются ли конечные точки противоположными точками эллипса, из-за чего оба пути составляют полуоборот. Также проверьте совпадение конечных точек, нулевой радиус или радиусы, которые средство отрисовки скорректировало для соединения точек. Меняйте один параметр за раз и сравнивайте отрисованный контур.

Может ли векторизация изображения автоматически восстановить исходную команду дуги? Не рассчитывайте на это. Трассировщик может восстановить редактируемые векторные фигуры из растровой графики, но результат может использовать кривые Безье или множество опорных точек. Перестройте точный круг или эллипс в векторном редакторе, если нужна исходная геометрия.

Источники

1. W3C — SVG 2 Paths — Синтаксис дуг, сочетания флагов и геометрия контуров.
2. W3C — SVG 2 Implementation Notes — Коррекция радиусов и обработка вырожденных дуг.
3. MDN — SVG Paths — Абсолютные и относительные команды контуров и руководство по дугам.
4. SVG Tutorial — Arc — Интерактивные демонстрации радиусов, поворота и флагов.
5. NaN — SVG Path Commands: Arcs — Интерактивное объяснение подбора эллипса и результатов выбора флагов.

Нужен редактируемый исходник перед изменением знака, доступного только в растре? Преобразуйте изображение в векторные контуры, проверьте результат и перерисуйте любую дугу, для которой важен точный радиус или направление обхода.