如何绘制政治坐标图

Question

我正在尝试编写像这样的图表：

我试过SVG，但它不是很好，因为我不得不使用2个不同的矩形，并且没有设法只获得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>

我该怎么做才能解决它或做得更好？

Answer 1

我会使用没有圆角的普通<rect>对象，并将clipPath应用于整个绘图以使角落圆整。

这是一个简单的例子：

<svg width="400" height="400" viewBox="0 0 400 400">
<defs>
  <clipPath id="roundRect">
    <rect x="10" y="10" rx="20" ry="20" width="380" height="380"/>
  </clipPath>
</defs>
<g clip-path="url(#roundRect)">
  <rect fill="#0a0" stroke="none" x="10" y="10" width="190" height="190"/>
  <rect fill="#f00" stroke="none" x="200" y="10" width="190" height="190"/>
  <rect fill="#0bf" stroke="none" x="10" y="200" width="190" height="190"/>
  <rect fill="#fd0" stroke="none" x="200" y="200" width="190" height="190"/>
</g>
</svg>