Как заполнить и обвести прямоугольник SVG углами с отрицательным радиусом?

Question

мне нужно создать блок с определенными границами вокруг него:

Я хочу, чтобы этот блок масштабируемой, поэтому я стараюсь делать это с SVG.

Вот что я сделал:

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none slice" viewBox="0 0 300 400"> 
    <path stroke-width="1" stroke="#7DD37D" fill="red" d=" 
    M20 0h260 
    m20 20v360 
    m-20 20H20 
    m-20 -20V20 
    M0 20a20 20 0 0 0 20 -20 
    M300 20a20 20 0 0 1 -20 -20 
    M300 380a20 20 0 0 0 -20 20 
    M0 380a20 20 0 0 1 20 20" id="path"/> 
</svg> 

Demo on codepen

Граница была создана в качестве пути из линий и дуг. Проблема в том, что я не могу заставить svg заполнить область внутри этого пути. Он заполняет некоторое пространство внутри дуг вместо прямоугольника. Что я делаю неправильно?

Когда я делаю что-то подобное с Inkscape, результирующий путь объединяется с линиями и кривыми Cubic Bezier. Можно ли это сделать с помощью простых дуг вместо кривых Безье?

Answer 1

Каждый раз, когда вы используете команду перемещения ('m' или 'M'), она создает новый подпуть. Каждый подпуть заполняется, а не все.

Если вы хотите, чтобы все было заполнено, оно должно быть непрерывным путем. Другими словами, в этом случае это должен быть шаг, за которым следует линия, затем дуга, затем другая строка и дуга, и так далее, пока вы не закончите все четыре стороны формы.