1

<svg width="99"  height="99" viewBox="0 0 36 36">
    <path
       id="rect135"
       d="M 17.097472,5.7761733 H 30.190131 V 14.17088 H 17.097472 Z"
       fill="#ff0000"
       style="stroke-width:0.704923" />
</svg>

Есть данная фигура, как мне добавить радиус к углам, к красной фигуре через Inkscape?

1 ответ 1

1
  • #1. Сохраняете в файл с расширением *.svg

fill="none" stroke="black" Чтобы был только бордер и не мешала закраска.

<svg width="99"  height="99" viewBox="0 0 36 36">
    <path
       id="rect135"
       d="M 17.097472,5.7761733 H 30.190131 V 14.17088 H 17.097472 Z"
       fill="none" stroke="black" />
</svg>

  • #2. В векторном редакторе добавляете направляющие

введите сюда описание изображения

  • #3. На пересечении направляющих в каждом углу добавляете два дополнительных узла

Для этого нужно дважды щёлкнуть по месту

введите сюда описание изображения

  • #4. Удаляете узлы в углах фигуры

См. рисунок ниже.

  1. Удаляете узлы
  2. Преобразовываете оставшиеся два узла в автоматически сглаженные и рычагами управления добиваетесь нужной формы. Их нужно просто совместить с направляющими

введите сюда описание изображения

  • #4. Повторяете действия для остальных узлов и сохраняете снова файл *.svg

введите сюда описание изображения

  • #5. При необходимости оптимизируете файл с помощью SVGOMG

Готовая фигура SVG

.container {
width:100vw;
height:100vh;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 36 36" version="1.1" id="svg3" >
  <path id="rect135" d="M18.5 5.8h10.2c.7 0 1.5.8 1.5 1.5v5.4c0 .7-.9 1.5-1.6 1.5h-10c-.7 0-1.5-.8-1.5-1.4V7.3c0-.7.7-1.5 1.4-1.5z" fill="gold"   />
</svg>
</div>

UPDATE

Такая техника рисования в векторном редакторе оправдана, когда нужно нарисовать фигуру со сложными контурами, но когда нужно закруглить простые фигуры, то проще сделать это с CSS

Ниже тот же прямоугольник, где углы закругляются с помощью border-radius

.rect {
width:198px;
height:99px;
background-color:red;
border-radius:20px;
}
<div class="rect"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.