How to draw a number centered inside a circle with inline svg?

Question

I\'m trying to write a Django template tag that will generate a number inside a circle as an inline svg.

The math is pretty straight-forward (except for the fudge-fa

Answer 1

You can't really rely on the alignment-baseline property. Support for it is pretty spotty at best.

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.

You can centre horizontally with text-anchor="middle", which is supported everywhere.

IMO, the best you can do in the vertical case, is the solution I propose in this answer: https://stackoverflow.com/a/19273331/1292848