Как нарисовать число, центрированное внутри круга с помощью встроенного 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/)

Answer 1

Вы не можете полагаться на alignment-baseline собственности. Поддержка в лучшем случае довольно пятнистая.

Даже если он поддерживается, alignment-baseline: middle на самом деле не вертикально центрирует символы. На самом деле нет способа сделать это точно и надежно.

Вы можете центрировать по горизонтали с text-anchor="middle", который поддерживается везде.

ИМО, лучшее, что вы можете сделать в вертикальном случае, это решение, которое я предлагаю в этом ответе: https://stackoverflow.com/a/19273331/1292848