如何在SVG中定义图形垂直基线以实现与文本自动对齐？

完全可以通过SVG自身属性设置，实现内联SVG与外部文本的基线自动对齐，无需手动调整垂直偏移，具体方法如下：

• 给SVG内文本元素设置基线属性
  针对SVG内部的数字文本（比如你例子中圆圈里的“2”），可以给<text>标签添加dominant-baseline: alphabetic和alignment-baseline: alphabetic属性，让文本的基线与外部普通文本的基线对齐。同时配合text-anchor: middle实现水平居中，示例代码如下：

  <svg width="20" height="20" viewBox="0 0 20 20">
    <circle cx="10" cy="10" r="8" stroke="black" fill="white"/>
    <text x="10" y="10" text-anchor="middle" dominant-baseline="alphabetic" font-size="14">2</text>
  </svg>
  

  这里dominant-baseline: alphabetic会将文本的基线定位到SVG坐标系中y值对应的位置，确保数字底部与外部文本基线对齐。

• 优化SVG的viewBox范围
  调整SVG的viewBox参数，让其刚好包裹内容且底部边界贴合文本基线，避免SVG内部出现多余的空白区域，影响整体对齐效果。

• HTML中确保容器对齐样式
  在HTML环境中使用该SVG时，显式设置SVG元素的vertical-align: baseline（这也是浏览器默认值，但避免被其他样式覆盖），保证SVG容器本身与文本基线对齐。

内容的提问来源于stack exchange，提问作者Jean-Philippe Pellet