I want to put a circle inside a circle but the issue is my first layer circle is cropped from the to-CodePudding

#pcircle {
    
    left: 50%;
    position:absolute;
  }
#icircle {
    
  left: 50%;
  position:absolute;
 
 
  }

<!DOCTYPE html>
<html lang="en">
<p style="position: absolute; bottom: 20px; left: 700px;z-index: 2;">
         <a name="anchor"></a>

            <svg id="pcircle" width="850" height="850" viewBox="0 0 850 850" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="350" cy="350" r="425" fill="#552626"/>
            </svg>
            <svg id="icircle" width="700" height="700" viewBox="0 0 700 700" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="350" cy="350" r="350" fill="#CD5353" fill-opacity="0.78"/>
            </svg>

   </p>
   </html>

CodePudding user response：

Your circle is cropped because it's the full size of the SVG but it isn't centered.

The viewBox is an 850px square.
Your circle has a radius of 425 giving it an 850px diameter.
The circle's center is at (350, 350), which is 75px up and left of center.

So it renders partially outside the bounding box, hence the "cropping".

CodePudding user response：

SVG's content is out of viewBox, so it was cropped.

viewBox - MDN

And here the corrent version of code.

<!DOCTYPE html>
<style>
  svg {
    position: absolute;
  }
</style>
<p>
  <svg width="850" height="850" viewBox="0 0 850 850">
    <circle cx="425" cy="425" r="425" fill="#552626" />
  </svg>
  <svg width="850" height="850" viewBox="0 0 850 850">
    <circle cx="425" cy="425" r="350" fill="#CD5353" fill-opacity="0.78" />
  </svg>
</p>