SVG一角コーナー四角形/四角形

Question

私は曲線コーナーを追加したい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"/> 

第一矩形は、湾曲左上隅を有していなければならない、第二の矩形は右上隅に湾曲し、最後から二番目の矩形は、湾曲左下隅を有するべきである必要があり、最後の矩形がなければなりません右下隅が湾曲しています。

私はパスを使用しようとしましたが、意味がありません。長い目標は、ループ内の各矩形を表示および非表示にすることです。

誰かがシングルコーナーカーブを練習することはできますか？

Answer 1

個々のコーナーの半径を制御することはできません。ソリッド塗り潰し矩形で作業している場合は、代わりに丸い四角形を描き、各コーナーに正方形を配置することができます。あなたは、その後に丸めずにコーナーをシミュレートするために、これらの正方形を表示し、非表示にすることができます：

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>