Точечные обводки SVG: интервалы и круглые концы

Для точечной обводки SVG задайте фигуре обводку, установите stroke-linecap="round" и используйте штрих нулевой длины с положительным промежутком, например stroke-dasharray="0 20". Ширина обводки задает диаметр точки. Второе число массива задает расстояние вдоль контура между центрами точек, а не пустое пространство между их видимыми краями.

Это различие важно, если граница выглядит тесной после округления концов. У замкнутого значка есть дополнительная проблема: повтор может вернуться к началу с более коротким остаточным интервалом. Примеры ниже разделяют форму концов, видимый интервал и замыкающий стык, чтобы вы меняли правильное значение.

Это декоративные настройки обводки. Они не создают новый смещенный контур и не превращают каждую нарисованную точку в отдельный контур для резки.

Сравните плоские концы, круглые концы и точки

stroke-dasharray чередует длины закрашенных штрихов и незакрашенных промежутков. Список из двух чисел упрощает проверку повтора. Справочник dash-array MDN также объясняет повтор списка нечетной длины для получения последовательности четной длины.

Скопируйте самостоятельный SVG в файл и откройте в браузере. Каждый оригинальный контур имеет длину 240 единиц и ширину обводки 8:

<svg xmlns="http://www.w3.org/2000/svg" width="420" height="300" viewBox="0 0 420 300">
 <g fill="none" stroke="#147d78" stroke-width="8">
  <path d="M40 55H280" stroke-dasharray="12 20" stroke-linecap="butt" />
  <path d="M40 145H280" stroke-dasharray="12 20" stroke-linecap="round" />
  <path d="M40 235H280" stroke-dasharray="0 20" stroke-linecap="round" />
 </g>
</svg>

Первый ряд использует 12 20 с плоскими концами. Полные штрихи занимают 12 единиц, оставляя 20 единиц видимого пространства. Второй ряд использует те же числа с круглыми концами. Каждый конец выступает на 4 единицы за конец базового штриха, поэтому полный штрих занимает 20 единиц, а видимый зазор уменьшается до 12.

Третий ряд меняет длину штриха на ноль. Круглые концы создают точки диаметром 8 с центрами на расстоянии 20 единиц на этом прямом контуре. Видимый зазор между краями равен 12 единицам. Правила оформления SVG W3C определяют концы штрихов, включая штрихи нулевой длины; справочник концов MDN объясняет их геометрию.

Для полных раздельных штрихов на прямом сегменте без калибровки расстояния и преобразования полезны расчеты:

• Плоский конец: видимая длина штриха = dash; видимый зазор = gap.
• Круглый конец: видимая длина штриха = dash + stroke-width; видимый зазор = gap - stroke-width.
• Круглая точка: диаметр = stroke-width; расстояние центров = gap; видимый зазор = gap - stroke-width.

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

Подгоните повтор вокруг замкнутого значка

Следующие прямоугольные контуры значков имеют размер 180 на 120 единиц каждый. Их периметр — 2 × (180 + 120) = 600. Контур начинается в верхнем левом углу и идет по часовой стрелке.

<svg xmlns="http://www.w3.org/2000/svg" width="620" height="230" viewBox="0 0 620 230">
  <g fill="none" stroke="#147d78" stroke-width="8" stroke-linecap="round">
    <path d="M40 40H220V160H40Z" stroke-dasharray="0 32" />
    <path d="M360 40H540V160H360Z" stroke-dasharray="0 30" />
  </g>
</svg>

Слева 0 32 помещает центры точек на расстояниях 0, 32, 64 и так далее до 576. До возвращения в начало остается лишь 24 единицы. Замыкающий интервал короче остальных интервалов 32 единицы, поэтому стык неравномерен. Увеличение отображаемого SVG усиливает несоответствие, но не решает его.

Справа 0 30 делит периметр на 20 равных интервалов. У этого конкретного прямоугольника обе стороны также делятся на 30, поэтому углы совпадают с точками. На каждой прямой стороне точки 8 единиц оставляют 22 единицы видимого пространства. Это исправляет повтор выбранного значка, но не обещает одинаковое визуальное расстояние на каждой кривой обводке.

Для своей обводки выберите желаемое число точек и разделите периметр контура на это число, получив начальное расстояние повтора. Затем проверьте реальный рендеринг, особенно изгибы, мелкие детали и замыкающую точку. Фигура с несколькими несвязанными подконтурами требует отдельного внимания, поскольку рисунок штрихов начинается заново на каждом подконтуре, как описывает спецификация оформления SVG.

stroke-dashoffset сдвигает начальное положение рисунка вдоль контура. Он может перенести заметный стык в менее заметное место, но не заставляет повтор 32 единицы делить 600 без остатка. Если нужно равномерное замыкание, используйте подогнанный повтор. Справочник dash-offset MDN описывает этот фазовый сдвиг.

Мы независимо открыли оба самостоятельных SVG и проверили их отображение в браузере по сравнению с этой иллюстрацией. Примеры используют значения без указания единиц, без калибровки pathLength, преобразований и внешнего CSS. Они демонстрируют вручную созданные контуры, а не конвертацию PerfectVector или совместимость между приложениями.

Согласуйте размеры и оформление

Начните с чисел в собственных координатах SVG, как выше. Не заменяйте их процентами в предположении, что они означают ту же долю периметра. Справочник dash-array описывает вычисление процентов относительно области просмотра, а не длины контура.

Если используете pathLength для нормализации расстояний, рассчитывайте рисунок штрихов в этой откалиброванной системе. Не смешивайте некалиброванный периметр этого примера с нормализованными значениями штрихов другого фрагмента. Руководство по анимации обводки SVG показывает отдельное применение нативной калибровки длины контура для появления рисунка.

Задайте fill="none", если нужна только граница. Заливка может оставаться видимой, даже когда часть обводки пунктирная. Если ожидаемые точки исчезают, подтвердите наличие видимой обводки и отсутствие переопределения атрибутов представления правилом CSS. Список проверок отсутствующей обводки охватывает эти проверки до изменения интервалов.

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

Отделяйте подготовку графики от дизайна границы

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

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

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

Проверьте итоговую обводку

Перед принятием файла отдельно осмотрите короткий открытый контур и замкнутую границу. Подтвердите стиль концов, ширину обводки и числа повтора; затем проверьте первые и последние отметки открытого контура и стык замкнутого. Осмотрите крутые изгибы в размере использования графики.

Снова откройте сохраненный SVG в целевом приложении. Для редактируемого декоративного оформления сохраните свойства обводки. Если приложению нужны постоянные контуры, выполните и проверьте преобразование как отдельный этап редактирования. Сохраните редактируемую исходную копию для последующего изменения интервалов.

FAQ

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

Как сделать круглые точки вместо коротких капсул? Используйте штрих нулевой длины, положительный промежуток и круглые концы. Например, ширина обводки 8 со stroke-dasharray="0 20" дает точки 8 единиц с центрами на расстоянии 20 единиц на прямом контуре.

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

Sources

1. MDN — stroke-dasharray — Определяет чередующийся список штрихов и промежутков и обработку значений.
2. MDN — stroke-linecap — Объясняет геометрию плоских и круглых концов и поведение при нулевой длине.
3. W3C — SVG painting — Определяет рисование штрихов, обработку концов и рисунок на подконтурах.
4. MDN — stroke-dashoffset — Определяет смещение рисунка штрихов.

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