CODEWITHSUNDEEP
svg
Udders
Udders

Reputation: 6976

SVG single curved corner square / rectangle

I have this SVG image which I want to add curved corners to.

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

The first rectangle should have the top left corner curved, the second rectangle should the top right corner curved, the penultimate rectangle should have the bottom left corner curved, and the last rectangle should have the bottom right corner curved.

I have tried using paths, but they don't make sense, and the long goal is show and and hide each rectangle in a loop, and this seems complicated with paths.

Can anyone enlighten in doing single corner curves?

Upvotes: 0

Views: 1515

Answers (1)

r3mainer
r3mainer

Reputation: 24567

You can't control the radius of an individual corner. If you're just working with solid filled rectangles, then you could instead draw a rounded rect and place a square at each corner. You can then show and hide these squares to simulate corners with and without rounding:

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>

Upvotes: 2

Related Questions