如何在内联 SVG 中画一个居中的数字圆？

Question

我正在尝试编写一个Django模板标签，它将生成一个内联svg中的圆形数字。

数学很简单（除了real_fontsize中的调整因子 - 我认为这与数字比最高字符短有关..？）

@register.inclusion_tag('numcircle.html')
def numcircle(n, size=36, border=4, color='white', background="black", **kw):
    """Draw a circle with a number inside.
    """
    kw['padding'] = kw.get('padding', 2)
    kw['num'] = n
    kw['size'] = size
    kw['border'] = border
    kw['center'] = size / 2
    kw['radius'] = (size / 2) - border
    kw['color'] = color
    kw['background'] = background
    kw['fontsize'] = size - (2 * (border + kw['padding']))
    real_fontsize = kw['fontsize'] * (0.8 if kw['fontsize'] > 25 else 1)
    kw['ypos'] = kw['center'] + real_fontsize / 2 - kw['border'] + kw.get('yadjust', 0)
    kw['xpos'] = kw.get('xpos', size / 2)
    return kw

模板：

<svg width="{{ size }}" height="{{ size }}" viewBox="0 0 {{ size }} {{ size }}">
    <circle cx="{{ center }}"
            cy="{{ center }}"
            r="{{ radius }}"
            stroke="{{ color }}"
            stroke-width="{{ border }}"
            fill="{{ background }}"/>
    <text font-size="{{ fontsize }}"
          fill="{{ color }}"
          font-family="Verdana"
          text-anchor="middle"
          alignment-baseline="baseline"
          x="{{ xpos }}"
          y="{{ ypos }}">{{ num }}</text>
</svg>

它生成的SVG在我测试过的所有浏览器中都可以很好地呈现，除了原生iPad浏览器外，数字与圆的底部齐平（而不是在中心）。

<svg width="44" height="44" viewBox="0 0 44 44">
<circle cx="22"
        cy="22"
        r="20"
        stroke="white"
        stroke-width="2"
        fill="#21435F"/>
<text font-size="36"
      fill="white"
      font-family="Verdana"
      text-anchor="middle"
      alignment-baseline="baseline"
      x="22"
      y="34.4">1</text>
</svg>

有没有一种跨浏览器（IE9+）的方法来解决这个问题？

jsfiddle链接: http://jsfiddle.net/onLyh6bm/

（在任何浏览器中使用alignment-baseline: middle似乎都不能使其垂直居中对齐：http://jsfiddle.net/68oamxdo/1/）

- thebjorn

---

你的代码片段帮助我深入学习了 <svg>。我借鉴了你的代码，并将尺寸替换为适合我项目的内容。非常感谢！ - Alexander Dixon

Answer 1

你不能真正依赖于 alignment-baseline 属性。它的支持情况非常不稳定。

即使它被支持，alignment-baseline: middle 并不能真正垂直居中字符。事实上，没有一种精确可靠的方法来做到这一点。

你可以使用 text-anchor="middle" 在水平方向上进行居中，这在任何地方都得到了支持。

在垂直方向的情况下，我认为最好的解决方案是我在此回答中提出的： https://stackoverflow.com/a/19273331/1292848

- Paul LeBeau