SVG嵌套圆形绘制时外层圆形顶部与左侧被裁剪问题如何解决

• 外层SVG内圆形的圆心坐标设置错误：外层
• 绝对定位的偏移逻辑错误：两个SVG都设置了left: 50%，但没有添加水平偏移修正，默认是SVG的左边缘对齐父容器的50%位置，会导致SVG左半部分内容超出父容器边界被裁剪。
• 外层父容器定位限制：包裹两个SVG的

  标签设置了left: 700px，会将整个内容区域向右侧强制偏移700px，如果视口宽度不足，也会导致左侧内容被视口裁剪，同时

  作为行内元素嵌套块级内容本身也存在语法不规范问题。

调整后的CSS代码 #

#pcircle {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
#icircle {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}

调整后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<div style="position: absolute; bottom: 20px; width: 100%; 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="425" cy="425" 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>
</div>
</html>

如果仅需要实现双层嵌套圆形效果，无需拆分两个SVG，直接在同一个SVG内按层级放置两个圆形即可，代码更简洁：

<svg width="850" height="850" viewBox="0 0 850 850" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- 外层圆 -->
  <circle cx="425" cy="425" r="425" fill="#552626"/>
  <!-- 内层圆 -->
  <circle cx="425" cy="425" r="350" fill="#CD5353" fill-opacity="0.78"/>
</svg>

内容的提问来源于stack exchange，提问作者yousef