SVG單曲角正方形/長方形

我有這個SVG圖像，我想添加彎角。SVG單曲角正方形/長方形

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="1024px" height="768px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve"> 

<rect x="0" y="0" fill="#e85c78" width="45" height="45"/> 
<rect x="45" y="0" fill="#e2235d" width="45" height="45"/> 

<rect x="0" y="45" fill="#75bae5" width="45" height="45"/> 
<rect x="45" y="45" fill="#3ca8de" width="45" height="45"/> 

<rect x="0" y="90" fill="#fac06b" width="45" height="45"/> 
<rect x="45" y="90" fill="#f6b043" width="45" height="45"/> 

<rect x="0" y="135" fill="#76b65e" width="45" height="45"/> 
<rect x="45" y="135" fill="#3ea73d" width="45" height="45"/> 

<rect x="0" y="180" fill="#456b7e" width="45" height="45"/> 
<rect x="45" y="180" fill="#0d5065" width="45" height="45"/> 

<rect x="32.5" y="225" fill="#d4c8b3" width="12.5" height="100"/> 
<rect x="45" y="225" fill="#bfb299" width="12.5" height="100"/>

第一矩形應具有左上角彎曲，所述第二矩形應該右上角彎曲的，倒數第二個矩形應具有左下角彎曲的，並且最後的矩形應具有右下角彎曲。

我嘗試過使用路徑，但它們沒有任何意義，長遠目標是顯示並隱藏每個矩形的循環，這似乎與路徑複雜。

任何人都可以在做單角曲線啓發？

來源

2016-07-29 Udders

我不能完全肯定作出具體邊角圓的，但我知道，爲了使邊角圓你只需要將'x'和'y'改爲'rx'和'ry'。你也可以給D3一槍。我做了一些類似於你用它解釋的東西。 – tcasey

您無法控制單個拐角的半徑。如果你只是用實心矩形工作，那麼你可以畫一個圓角矩形並在每個角落放置一個正方形。然後，您可以顯示和隱藏這些方格來模擬角落，沒有四捨五入：

svg rect { fill: #e85c78; } 
 
svg .A, svg:hover .B { opacity:1; } 
 
svg .B, svg:hover .A { opacity:0; }

<svg width="160" height="160" viewBox="0 0 200 200"> 
 
    <rect x="10" y="10" width="140" height="140" rx="50" ry="50"/> 
 
    <rect x="10" y="10" width="50" height="50" class="A"/> 
 
    <rect x="100" y="10" width="50" height="50" class="B"/> 
 
    <rect x="100" y="100" width="50" height="50" class="A"/> 
 
    <rect x="10" y="100" width="50" height="50" class="B"/> 
 
</svg>

來源

2016-07-29 16:49:08

SVG單曲角正方形/長方形

回答

相關問題