> [Site index](https://perfectvector.com/llms.txt) — available pages and descriptions. # Скругление углов SVG изменением залитой фигуры > Скруглите угол залитого SVG касательной дугой, проверьте, помещается ли радиус на рёбрах, и узнайте, почему круглое соединение обводки не меняет заливку. Source: https://perfectvector.com/ru/blog/round-svg-path-corners Language: ru Author: Irene Kim Published: 2026-10-12T08:00:00+09:00 Чтобы скруглить угол заливки контура SVG, измените геометрию. Закончите соседние прямые отрезки до вершины, затем соедините новые концы кривой. `stroke-linejoin="round"` меняет окрашивание соединения обводки, оставляя исходное залитое очертание на месте. В руководстве скругляется один прямой угол собственной залитой эмблемы. Нужны текстовый редактор и браузер. В результате будут полный SVG с круговым сопряжением 20 единиц, проверка допустимости радиуса и исходный угловатый файл для сравнения или восстановления. Сопряжение — кривая, заменяющая острый угол и касательно соединяющая соседние рёбра. В примере используется четверть окружности между горизонтальным и вертикальным прямыми рёбрами. Он не скругляет автоматически произвольные трассированные кривые Безье. ## Выберите нужное изменение рисунка [Справочник stroke-linejoin](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linejoin) определяет рисование обводки в углах. Используйте круглое соединение, если менять нужно именно окрашенную рамку. Для изменения залитого силуэта редактируйте настоящий контур. | Объект или требование | Подходящая отправная точка | Что меняется | | --------------------------------------- | ----------------------------------- | ----------------------------------- | | Обычный прямоугольник SVG | Задать `rx` или `ry` прямоугольника | Геометрия его углов | | Угловатый контур с обводкой | Задать круглое соединение обводки | Краска вокруг существующего контура | | Залитый многоугольник или эмблема | Заменить выбранный угол кривой | Залитый силуэт | | Сложный трассированный контур с кривыми | Проверить и изменить выбранный стык | Зависит от реальных сегментов | Для обычного прямоугольника [справочник SVG rect](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect) описывает `rx` и `ry`. В нашей эмблеме есть диагональное ребро, поэтому превращение в скруглённый прямоугольник изменило бы больше выбранного угла. Если проблема лишь в длинном шипе обводки, начните с [диагностики острых выступов miter](https://perfectvector.com/ru/blog/svg-miter-spikes). Эта статья меняет залитую геометрию. ## Сохраните угловатый оригинал Скопируйте полный файл в `emblem-original.svg` и откройте в браузере. Верхняя правая вершина — (170, 30). Входящее ребро горизонтально, исходящее идёт вниз до (170, 100). ```xml ``` Оставьте файл оригиналом сравнения. Добавление `stroke="#df9d34"`, `stroke-width="8"` и `stroke-linejoin="round"` даст округлую окрашенную рамку, а тёмная заливка всё ещё достигнет исходного острого угла. ## Замените угол дугой 20 единиц Переместите конец входящей линии на 20 единиц влево от вершины, в (150, 30). Начало исходящей — на 20 единиц вниз, в (170, 50). Окружность с центром (150, 50) и радиусом 20 соединяет точки четвертью дуги. Сохраните второй полный файл как `emblem-rounded.svg`: ```xml ``` `A20 20 0 0 1 170 50` означает круговую дугу с горизонтальным и вертикальным радиусами 20, нулевым поворотом, малой дугой и флагом направления 1, заканчивающуюся в (170, 50). [Спецификация контуров SVG](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands) определяет параметры. Для этого угла по часовой стрелке они выбирают нужную четверть окружности. [Руководство по флагам дуг](https://perfectvector.com/ru/blog/svg-arc-flags) помогает исправить дугу, идущую не той стороной. Радиус окружности вертикален в первом конце и горизонтален во втором. Поэтому касательная следует горизонтальной входящей и вертикальной исходящей линии. Кривая может выглядеть округлой, сохраняя излом на стыке; эта конструкция даёт указанным рёбрам совпадающие направления касательных. ![Угловатая залитая эмблема с круглой обводкой, та же эмблема с сопряжением контура радиусом двадцать единиц и слишком большой радиус за следующей вершиной](https://perfectvector.com/blog/round-svg-path-corners/fillet-comparison.webp) *Первый пример меняет краску обводки. Второй — границу тёмной заливки. Третий показывает ошибку игнорирования короткого соседнего ребра; проверка радиуса отвергает этот случай.* ## Проверьте, помещается ли радиус на рёбрах В этом угле 90 градусов круговое сопряжение занимает вдоль каждого соседнего ребра расстояние, равное радиусу. Входящий участок длиной 140 единиц, исходящий — лишь 70. Для одного скругляемого угла положительный радиус не должен превышать 70; выберите меньший, если нужно сохранить прямую часть исходящего ребра. Следующая функция намеренно ограничена именно этой эмблемой и углом. Запустите в консоли JavaScript или Node.js для получения нового `d`. ```javascript 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. Мы также проверили оба конца дуги относительно радиуса и соседних направлений касательных. Это подтверждает приведённый пример прямых рёбер, а не общий алгоритм скругления или результат резки. Если кривая выпирает наружу, проверьте конец дуги и флаг направления. Если излом остался, сравните касательную кривой с соседним сегментом; [руководство по гладким стыкам Безье](https://perfectvector.com/ru/blog/svg-bezier-smooth-joins) объясняет отдельную задачу исправления. [Руководство по редактированию SVG](https://perfectvector.com/ru/blog/how-to-edit-an-svg) рассматривает открытие, проверку и сохранение пригодного оригинала. ## Где PerfectVector полезен до правки углов PerfectVector восстанавливает векторные контуры, если рисунок есть только в растре. Сначала проверьте очертание, затем решите, какие углы менять в копии. [Процесс изображения в вектор](https://perfectvector.com/ru/image-to-vector) даёт этап восстановления, но не применяет автоматически это сопряжение. Используйте исходный вектор, если он доступен. Трассированный контур может иметь сегменты Безье и мелкие неровности, не соответствующие прямым рёбрам примера. Перерисовать простую задуманную эмблему бывает легче, чем скруглять каждый трассированный стык. Сохраните утверждённую форму до намеренного редизайна и используйте [руководства рабочих процессов блога](https://perfectvector.com/ru/blog) для следующей проверки передачи. ## Частые вопросы ### Почему круглое соединение обводки оставляет угол заливки острым? Соединение управляет краской обводки вокруг контура. Заливка следует существующей геометрии и сохраняет исходный угол, пока вы не замените её кривой. ### Можно ли применять функцию к любому контуру SVG? Нет. Она обрабатывает один указанный прямой угол показанной эмблемы с прямыми рёбрами. Другие углы, вогнутость, существующие кривые и ограничения общих рёбер требуют собственного построения. ### Делает ли это файл готовым к резке? Меняется одно залитое очертание примера. Проверьте сохранённую геометрию и выполните требования своего плоттера или производства; браузерный тест не устанавливает физический результат резки. ## Источники 1. [MDN — SVG stroke-linejoin](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Attribute/stroke-linejoin) — Определяет настройку окрашивания обводки, отличаемую в сравнении от залитой геометрии. 2. [MDN — SVG rect](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/rect) — Описывает простые регуляторы радиуса обычных прямоугольников. 3. [W3C — Команды эллиптических дуг SVG](https://www.w3.org/TR/SVG2/paths.html#PathDataEllipticalArcCommands) — Определяет радиусы, флаги и конечную точку полного скруглённого контура. *** Если исходные контуры отсутствуют, [восстановите рисунок в PerfectVector](https://perfectvector.com/ru/image-to-vector). Сравните очертание с эталоном, сохраните восстановленный оригинал и испытывайте намеренные правки углов в отдельной копии при нужном размере. ## Explore - [Read the HTML article](https://perfectvector.com/ru/blog/round-svg-path-corners) - [Относительные команды контуров SVG: текущая точка](https://perfectvector.com/ru/blog/svg-relative-path-commands.md) - [SVG импортируется в неверном размере: диагностика и исправление](https://perfectvector.com/ru/blog/svg-imports-wrong-size.md) - [Product facts](https://perfectvector.com/product-facts.md) - [FAQ](https://perfectvector.com/faq.md) - [Pricing and credits](https://perfectvector.com/pricing.md)