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

Чтобы скруглить угол заливки контура SVG, измените геометрию. Закончите соседние прямые отрезки до вершины, затем соедините новые концы кривой. stroke-linejoin="round" меняет окрашивание соединения обводки, оставляя исходное залитое очертание на месте.

В руководстве скругляется один прямой угол собственной залитой эмблемы. Нужны текстовый редактор и браузер. В результате будут полный SVG с круговым сопряжением 20 единиц, проверка допустимости радиуса и исходный угловатый файл для сравнения или восстановления.

Сопряжение — кривая, заменяющая острый угол и касательно соединяющая соседние рёбра. В примере используется четверть окружности между горизонтальным и вертикальным прямыми рёбрами. Он не скругляет автоматически произвольные трассированные кривые Безье.

Выберите нужное изменение рисунка

Справочник stroke-linejoin определяет рисование обводки в углах. Используйте круглое соединение, если менять нужно именно окрашенную рамку. Для изменения залитого силуэта редактируйте настоящий контур.

Для обычного прямоугольника справочник SVG rect описывает rx и ry. В нашей эмблеме есть диагональное ребро, поэтому превращение в скруглённый прямоугольник изменило бы больше выбранного угла.

Если проблема лишь в длинном шипе обводки, начните с диагностики острых выступов miter. Эта статья меняет залитую геометрию.

Сохраните угловатый оригинал

Скопируйте полный файл в emblem-original.svg и откройте в браузере. Верхняя правая вершина — (170, 30). Входящее ребро горизонтально, исходящее идёт вниз до (170, 100).

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H170V100L110 160H30Z"/>
</svg>

Оставьте файл оригиналом сравнения. Добавление stroke="#df9d34", stroke-width="8" и stroke-linejoin="round" даст округлую окрашенную рамку, а тёмная заливка всё ещё достигнет исходного острого угла.

Замените угол дугой 20 единиц

Переместите конец входящей линии на 20 единиц влево от вершины, в (150, 30). Начало исходящей — на 20 единиц вниз, в (170, 50). Окружность с центром (150, 50) и радиусом 20 соединяет точки четвертью дуги.

Сохраните второй полный файл как emblem-rounded.svg:

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="190" viewBox="0 0 200 190">
  <path fill="#174f68"
        d="M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z"/>
</svg>

A20 20 0 0 1 170 50 означает круговую дугу с горизонтальным и вертикальным радиусами 20, нулевым поворотом, малой дугой и флагом направления 1, заканчивающуюся в (170, 50). Спецификация контуров SVG определяет параметры. Для этого угла по часовой стрелке они выбирают нужную четверть окружности. Руководство по флагам дуг помогает исправить дугу, идущую не той стороной.

Радиус окружности вертикален в первом конце и горизонтален во втором. Поэтому касательная следует горизонтальной входящей и вертикальной исходящей линии. Кривая может выглядеть округлой, сохраняя излом на стыке; эта конструкция даёт указанным рёбрам совпадающие направления касательных.

Проверьте, помещается ли радиус на рёбрах

В этом угле 90 градусов круговое сопряжение занимает вдоль каждого соседнего ребра расстояние, равное радиусу. Входящий участок длиной 140 единиц, исходящий — лишь 70. Для одного скругляемого угла положительный радиус не должен превышать 70; выберите меньший, если нужно сохранить прямую часть исходящего ребра.

Следующая функция намеренно ограничена именно этой эмблемой и углом. Запустите в консоли JavaScript или Node.js для получения нового d.

function roundEmblemCorner(radius) {
  const incomingLength = 170 - 30;
  const outgoingLength = 100 - 30;
  if (!Number.isFinite(radius) || radius <= 0 ||
      radius > Math.min(incomingLength, outgoingLength)) {
    throw new Error('Radius must be positive and fit both adjacent edges.');
  }
  return `M30 30H${170 - radius}` +
    `A${radius} ${radius} 0 0 1 170 ${30 + radius}` +
    'V100L110 160H30Z';
}
 
roundEmblemCorner(20);
// M30 30H150A20 20 0 0 1 170 50V100L110 160H30Z

При радиусе 80 наивная конструкция закончила бы дугу в (170, 110), за следующей вершиной (170, 100). Последующая V100 развернула бы направление. Отвергните такой радиус вместо принятия случайно нарисованного браузером результата.

Для других углов прямых рёбер расстояние до касания зависит от угла. Для обычного выпуклого угла с внутренним углом θ оно равно r / tan(θ / 2). Если скругляете оба конца общего ребра, два занятых расстояния должны вместе помещаться на нём. Вогнутые углы, существующие кривые и составные фигуры требуют дополнительных решений; функция их не обрабатывает.

Проверьте изменённый силуэт и сохраните источник

1. Откройте оба полных SVG в одинаковом размере и на одном фоне.
2. Временно уберите обводку из версии с круглым соединением. Заливка должна совпасть с угловатым оригиналом.
3. Сравните верхний правый контур скруглённой версии. Остальные стороны, диагональ и общее положение должны совпасть с оригиналом.
4. Запустите проверку радиуса с 20, затем 80. Первый даёт показанный контур, второй вызывает ошибку радиуса.
5. Проверьте сохранённый SVG в месте использования. Верните оригинал, если скругление удаляет намеренную деталь или целевая программа меняет вид.

Примечание о методе: мы отрисовали исходный контур, круглую обводку и сопряжение в Chromium. Точка заливки (169, 31) находилась внутри первых двух фигур и вне скруглённой. Точная функция выше приняла 20 и отвергла 80. Мы также проверили оба конца дуги относительно радиуса и соседних направлений касательных. Это подтверждает приведённый пример прямых рёбер, а не общий алгоритм скругления или результат резки.

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

Где PerfectVector полезен до правки углов

PerfectVector восстанавливает векторные контуры, если рисунок есть только в растре. Сначала проверьте очертание, затем решите, какие углы менять в копии. Процесс изображения в вектор даёт этап восстановления, но не применяет автоматически это сопряжение.

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

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

Почему круглое соединение обводки оставляет угол заливки острым?

Соединение управляет краской обводки вокруг контура. Заливка следует существующей геометрии и сохраняет исходный угол, пока вы не замените её кривой.

Можно ли применять функцию к любому контуру SVG?

Нет. Она обрабатывает один указанный прямой угол показанной эмблемы с прямыми рёбрами. Другие углы, вогнутость, существующие кривые и ограничения общих рёбер требуют собственного построения.

Делает ли это файл готовым к резке?

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

Источники

1. MDN — SVG stroke-linejoin — Определяет настройку окрашивания обводки, отличаемую в сравнении от залитой геометрии.
2. MDN — SVG rect — Описывает простые регуляторы радиуса обычных прямоугольников.
3. W3C — Команды эллиптических дуг SVG — Определяет радиусы, флаги и конечную точку полного скруглённого контура.

Если исходные контуры отсутствуют, восстановите рисунок в PerfectVector. Сравните очертание с эталоном, сохраните восстановленный оригинал и испытывайте намеренные правки углов в отдельной копии при нужном размере.