纯SVG中的垂直中心字体真棒图标

Question

我有一个使用 Font Awesome 图标的 svg 应用程序。我正在尝试将 Font Awesome 图标在 SVG 圆圈内垂直居中，但我无法获得像素完美的垂直居中。我很接近，但图标总是有点太高了。我不知道我可能会使用什么类型的图标，所以我需要一个通用的解决方案（即我不能为某些图标硬编码）。

这是我的代码：

<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 dominant-baseline="middle" text-anchor="middle" style="font-family: 'FontAwesome';" fill="white" font-size="65px">&#xf128;</text>
  </g>
</svg>

Answer 1

在这种情况下，它的接缝像

dominant-baseline="central"

会给出更好的结果。 显性基线 - 中央

<script src="https://use.fontawesome.com/c3ef28c600.js"></script>
<svg width="200" height="200" viewBox="0 0 120 120">
  <g transform="translate(60, 60)">
    <circle r="55" stroke="blue" stroke-width="10" fill="red"></circle>
    <text dominant-baseline="central" text-anchor="middle" style="font-family: 'FontAwesome';" fill="white" font-size="100">&#xf128;</text>
  </g>
</svg>