SVG图标设置padding与border-radius后内容被截断，求解决方案

方案1：用外层容器包裹SVG #

把背景色、padding、border-radius等样式转移到外层容器上，让SVG只负责渲染图标内容，彻底避免截断问题。示例代码如下：

<div class="svg-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <!-- 你的SVG图标路径内容 -->
  </svg>
</div>

对应CSS：

.svg-wrapper {
  padding: 10px;
  border-radius: 50%;
  background-color: #你的背景色值;
  display: inline-block; /* 让容器贴合SVG的实际尺寸 */
}
.svg-wrapper svg {
  width: 24px;
  height: 24px;
}

方案2：调整SVG自身的viewBox并设置overflow #

如果不想额外加容器，可以通过修改SVG的viewBox来预留padding空间，同时开启overflow: visible防止内容被裁剪。
比如原SVG的viewBox是0 0 24 24，要加10px的padding，可将viewBox调整为-10 -10 44 44（上下左右各扩展10px，整体宽高变为24+20=44），再给SVG添加样式：

svg {
  padding: 10px;
  border-radius: 50%;
  background-color: #你的背景色值;
  overflow: visible;
}

这种方法需要根据SVG的实际尺寸计算viewBox的偏移量，灵活性不如容器方案。

问题根源说明 #

SVG默认overflow属性为hidden，当直接给SVG元素设置border-radius时，SVG的可视区域会被圆角裁剪；而padding是添加在SVG元素的盒模型上，图标内容如果超出裁剪范围就会被截断。用容器方案时，裁剪发生在容器层，SVG内容在容器内部不受影响；调整viewBox则是扩大了SVG的可视范围，让图标内容完全落在圆角区域内。

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