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 that you have read and understand our privacy policy and code of conduct.

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