どのように私はこの1つのようなグラフをプログラムしようとしている政治的な座標グラフ

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>