如何在SVG圆形中精准垂直居中Font Awesome图标？

问题根源 #

你遇到的偏移问题，本质是Font Awesome字体的字形视觉中心与字体em框的中线不匹配。dominant-baseline: middle是基于em框中线对齐，而非图标实际的视觉中心，所以会出现图标偏上的情况。

通用解决方案（两种可选） #

方案1：动态计算视觉偏移（基于字体图标）

通过SVG的getBBox()方法获取图标的实际占用区域，自动计算并调整偏移量，适配任意Font Awesome图标：

<script src="https://use.fontawesome.com/c3ef28c600.js"></script>
<svg width="200" height="200">
  <g transform="translate(65, 65)">
    <circle r="55" stroke="blue" stroke-width="10" fill="red"></circle>
    <text id="fa-icon" dominant-baseline="middle" text-anchor="middle" style="font-family: 'FontAwesome';" fill="white" font-size="65px">&#xf128;</text>
  </g>
</svg>
<script>
  const iconText = document.getElementById('fa-icon');
  const iconBBox = iconText.getBBox();
  // 计算垂直偏移：将图标视觉中心对齐到圆形中心
  const verticalOffset = (iconBBox.height / 2) - (iconBBox.y + iconBBox.height);
  iconText.setAttribute('dy', verticalOffset);
</script>

原理：getBBox()能精确获取图标的实际边界，通过计算边界的视觉中心与text元素基线的差值，用dy属性调整位置，实现像素级居中。

方案2：使用SVG矢量图标（推荐）

放弃字体图标，直接使用Font Awesome的SVG矢量图标，从根源避免字体基线问题，对齐更精准：

<svg width="200" height="200">
  <g transform="translate(65, 65)">
    <circle r="55" stroke="blue" stroke-width="10" fill="red"></circle>
    <!-- 将SVG图标中心对齐到圆形中心 -->
    <use href="#fa-bug" width="65" height="65" transform="translate(-32.5, -32.5)" fill="white"/>
  </g>
</svg>

<!-- 隐藏的SVG图标定义（可从Font Awesome官网复制对应图标的路径） -->
<svg style="display: none;">
  <symbol id="fa-bug" viewBox="0 0 1024 1024">
    <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z m184-250c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48zm-320 0c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-48zm160 168c-40.8 0-74-33.2-74-74s33.2-74 74-74 74 33.2 74 74-33.2 74-74 74z m0-112c-20.9 0-38 17.1-38 38s17.1 38 38 38 38-17.1 38-38-17.1-38-38-38z"/>
  </symbol>
</svg>

原理：SVG矢量图标自带精确的viewBox，通过transform: translate(-32.5, -32.5)将65px大小的图标中心直接对齐到圆形中心（g元素已translate到圆形位置），无需依赖字体属性，适配所有图标类型。

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