如何用负半径的角填充和描边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

每次使用移动（＆＃39; m＆＃39;或＆＃39; M＆＃39;）路径命令时，它都会创建一个新的子路径。每个子路径都被填充，而不是整个。

如果你想要整个东西填满，它必须是一条连续的道路。换句话说，在这种情况下，它应该是一个移动后跟一个线，然后是一个弧，然后是另一个线和弧，依此类推，直到你完成了形状的所有四个边。