如何使FontAwesome JS图标的SVG背景居中，不超出图标边界？

要让黑色背景矩形在SVG图标内垂直居中，直接调整<rect>的坐标属性即可，具体操作如下：

核心解决方法 #

计算背景矩形的垂直偏移量：(100% - 背景高度百分比) / 2，将这个值设为rect的y属性值，就能让背景在垂直方向居中，消除上下多余的背景部分。

示例代码 #

假设你的SVG使用FontAwesome标准的viewBox="0 0 512 512"，调整后的完整代码如下：

<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <!-- 垂直居中的黑色背景：高度90%，上下各留5%空白 -->
  <rect x="0" y="5%" width="100%" height="90%" fill="black"/>
  <!-- FontAwesome JavaScript图标路径，填充黄色 -->
  <path d="M320 0H192C86 0 0 86 0 192v128c0 106 86 192 192 192h128c106 0 192-86 192-192V192C512 86 426 0 320 0zM359.8 206.5c0-30.7-21.7-56.1-58.9-56.1h-46.4c-37.2 0-58.9 25.4-58.9 56.1v24.6c0 30.7 21.7 56.1 58.9 56.1h15.6v46.2h-31.1c-11.2 0-20.2 9-20.2 20.2v31.1c0 11.2 9 20.2 20.2 20.2h67.1c11.2 0 20.2-9 20.2-20.2v-31.1c0-11.2-9-20.2-20.2-20.2h-31.1v-46.2h15.6c37.2.1 58.9-25.3 58.9-56v-24.7z" fill="#fcd000"/>
</svg>

为什么CSS padding-top无效？ #

SVG的布局模型和HTML盒模型完全不同，<rect>是基于坐标定位的图形元素，CSS的padding-top只会影响整个SVG元素在HTML页面中的外边距，无法改变内部矩形的位置，必须通过调整SVG元素自身的坐标属性来实现内部布局。

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