如何用内嵌svg画一个以圆圈为中心的数字? [英] How to draw a number centered inside a circle with inline svg?
问题描述
我正在尝试编写Django模板标记,该标记将在圆内生成一个数字作为内嵌svg.
I'm trying to write a Django template tag that will generate a number inside a circle as an inline svg.
数学运算非常简单(real_fontsize
中的软键因子除外-我认为它与数字短于最高字符短有关.. ??)
The math is pretty straight-forward (except for the fudge-factor in real_fontsize
-- I'm thinking it has to do with numerals being shorter than the tallest character..?)
@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浏览器除外,该数字与圆圈的底部齐平(而不是在中心).
it produces an svg that renders very nicely in all browsers I have tested, except the native iPad browser, where the number is flush with the bottom of the circle (and not in the center)..
<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 +)的方式解决此问题?
Is there any way to work around this issue in a cross-browser (IE9+) fashion?
jsfiddle: http://jsfiddle.net/onLyh6bm/
jsfiddle: http://jsfiddle.net/onLyh6bm/
(在任何浏览器中,使用alignment-baseline: middle
似乎都不会在中间对齐..: http://jsfiddle.net/68oamxdo/1/)
(using alignment-baseline: middle
doesn't seem to align in the middle in any browser..: http://jsfiddle.net/68oamxdo/1/)
推荐答案
您不能真正依赖alignment-baseline
属性.对此的支持充其量是不完整的.
You can't really rely on the alignment-baseline
property. Support for it is pretty spotty at best.
即使受支持,alignment-baseline: middle
也不真正将字符垂直居中.实际上,没有任何方法可以准确可靠地做到这一点.
Even when it is supported, alignment-baseline: middle
doesn't really vertically centre the characters. There is, in fact, no way to do it accurately and reliably.
您可以使用text-anchor="middle"
来水平居中,这在任何地方都受支持.
You can centre horizontally with text-anchor="middle"
, which is supported everywhere.
IMO,在垂直情况下,您可以做的最好的就是我在此答案中提出的解决方案: https://stackoverflow. com/a/19273331/1292848
IMO, the best you can do in the vertical case, is the solution I propose in this answer: https://stackoverflow.com/a/19273331/1292848
这篇关于如何用内嵌svg画一个以圆圈为中心的数字?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!