Rounding the corners of an SVG

Issue

I'm using a package that generates a rectangular Treemap with this structure:

• svg (wrapper with width=100% and height=100%)
  • svg (the outer rectangle of the Treemap, also width=100% and height=100%)
    • g (one for each Treemap node)
      • rect
      • clipPath
      • text

I need to round the four corners of the entire Treemap (not the rx ry of each rect within).

Is it possible to do that by creating a clipPath either as a child of the wrapper or the inner svg that defines a rounded rectangle? If so, can it expose whatever the background color is behind the svg?

UPDATE: @web-tiki - here's what the code looks like...

<svg width="100%" height="100%" style="border-radius: 4px;">
  <svg width="100%" height="100%">
  <!-- ... -->

Looks great on Safari and Firefox but Chrome appears to ignore it. Wondering if it's a combination of Carbon Charts Treemap and Chrome?

Solution

The easiest solution is probably to use the border-radius CSS property on the svg wrapper element. It will allow you to clip round corners on your svg element and expose the background color behind the svg. Here is an example :

body {
  background: darkorange;
}

#wrapper {
  display: block;
  width: 100%;
  border-radius: 50px;
  overflow: hidden;
  border:10px solid pink;
}

<svg id="wrapper" viewBox="0 0 100 100">
  <svg>
    <rect fill="teal" x="0" y="0" width="100" height="100"/>
   </svg>
</svg>

On a side note, you can also wrap the entire svg inside a div and apply the border-radius on that div like this :

body {
  background: darkorange;
}

#wrapper {
  border-radius: 50px;
  overflow: hidden;
  border: 10px solid pink;
}

<div id="wrapper">
  <svg viewBox="0 0 100 100">
    <svg>
      <rect fill="teal" x="0" y="0" width="100" height="100"/>
     </svg>
  </svg>
</div>

Answered By - web-tiki