Svg 如何绘制政治坐标图

我正试图编写一个这样的图表：

我尝试使用SVG，但效果不是很好，因为我必须使用两个不同的矩形，并且没有设法只得到4条要圆角的边

这是我的密码：

    <svg width="400" height="250">
<defs>
    <linearGradient id="solids" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        <stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
        <stop offset="50%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
    </linearGradient>
    <linearGradient id="solids2" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="50%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
        <stop offset="50%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
        <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </linearGradient>
  </defs>
    <text x="135" y="12" style="fill:black;">Conservadorismo
    <tspan x="150" y="240">Liberalismo</tspan>
    <tspan x="20" y="125">Esquerda</tspan>
    <tspan x="305" y="125">Direita</tspan>
    </text>
    <rect x="100" y="20" rx="20" ry="20" width="200" height="100" style="fill:url(#solids); opacity:0.76" />
    <rect x="100" y="120" rx="20" ry="20" width="200" height="100" style="fill:url(#solids2); opacity:0.76" />
    <line x1="100" y1="120" x2="300" y2="120" style="stroke:black;stroke-width:2" />    
    <line x1="200" y1="20" x2="200" y2="220" style="stroke:black;stroke-width:2" />
</svg>

音乐爱好者
自由主义者
埃斯克尔达
迪雷塔

---

我应该怎么做才能修复它或者做得更好？

我会使用普通的

对象，没有圆角，然后对整个图形应用

剪贴画来圆角

下面是一个简单的例子：


请您向我解释一下“viewBox”和“clipPath”是如何工作的？定义了映射到矩形SVG视口的SVG坐标区域，并定义了底层对象的哪些部分是可见的。在本例中，剪辑路径是一个圆角矩形，通过将其应用于包含彩色正方形的
元素，可以切断外角。我建议您将网格线添加到相同的
元素中，以便它们也在拐角处剪裁。