如何繪製一個政治座標繪製

Political Coordinates

我與SVG試過了，但它不是，因爲我不得不使用2個不同的矩形非常好，沒有設法得到只有四個邊緣被舍入。

這裏是我的代碼：

<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>

我應該怎麼做來解決它還是做的更好？

來源

2017-02-26 Murilo Gomes

我會使用普通的<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>

來源

2017-02-26 23:59:26

能否請你解釋一下如何做「視框」和「clipPath」的工作好嗎？ –

['viewBox']（https://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute）定義映射到矩形SVG視口的SVG座標區域和['clipPath'] （https://www.w3.org/TR/SVG/masking.html#EstablishingANewClippingPath）定義底層對象的哪些部分是可見的。在這個例子中，剪輯路徑是一個圓角矩形，並且通過將其應用於包含彩色正方形的「元素」，它具有切除外角的效果。我建議你在相同的''元素中添加你的網格線，這樣它們也被剪切在角落。 –

如何繪製一個政治座標繪製

回答

相關問題