SVG中<use>标签引用图标未居中的问题及修复方法

问题原因分析 #

你用引用SVG图标时出现的不居中问题，主要是CSS样式干扰了布局，加上对样式的继承特性导致偏移：

• .icon类里的top: .25ex是用来让行内图标和文字对齐的，但在你的圆形居中容器里，这个相对偏移会把图标往上顶
• 额外设置的.icon-handshake { padding-top: 15px; }会增加容器内边距，把图标挤到顶部位置
• 虽然你的symbol和引用SVG的viewBox都是85x85，但CSS层级样式会覆盖默认的居中行为

具体修复步骤 #

1. 移除.icon类的top偏移
   删掉.icon里的top: .25ex，这个属性在当前居中场景下完全没必要：

   .icon {
     display: inline-block;
     position: relative;
     width: 1em;
     height: 1em;
     /* 删掉这行：top: .25ex */
     fill: currentColor;
     pointer-events: none;
   }
   

2. 删除多余的padding-top
   直接移除.icon-handshake的内边距设置：

   /* 删掉整个这个规则 */
   /* .icon-handshake { padding-top: 15px; } */
   

3. 给标签添加坐标属性（可选但保险）
   给加上x="0"和y="0"，强制让引用的symbol和SVG容器的坐标原点对齐，避免任何潜在的viewBox偏移问题：

   <svg class="icon icon-handshake mp-stat-block__stat-icon--no-value" viewBox="0 0 85 85" preserveAspectRatio="xMidYMid meet">
     <use xlink:href="#icon-handshake" x="0" y="0"></use>
   </svg>
   

4. 确认flex容器的居中设置
   你的.mp-stat-block__stat-info已经用了display: flex; justify-content: center; align-items: center;，确保这个容器没有被其他样式覆盖宽高（它应该继承.mp-stat-block__stat-circle的9.4rem宽高），也没有额外的padding/margin。

做完这些修改后，图标就能像直接写SVG时一样，完美居中在圆形容器里了。

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