Vertical alignment in SVG via svgwrite

467 Views Asked by At

I'm having issues with vertical alignment of texts when using the svgwrite python library.

For example, here's a simple code that generates a red-filled circle with a black text saying "Text" on top of the circle:

import svgwrite                                             

d = svgwrite.Drawing(filename='alignment_test.svg',                          
                     size=(60,60))                                             
circle = d.circle((30,30), 30, fill='red')                                     
text = d.text('Test', (30,30),                                                 
              style='text-anchor:middle',                                      
              font_size='17px')                                                                                                               
d.add(circle)                                                                  
d.add(text)
d.save()

The result is this expected image:

enter image description here

However, I want the text to also be vertically aligned.

I tried using the alignment-baseline attribute of SVG, i.e.

style='text-anchor:middle;\
       alignment-baseline:middle'

However, it doesn't work - neither in FireFox (where the vertical alignment just doesn't work), not in Inkscape, which complains Unimplemented style property 363.

I would appreciate any suggestions on how to solve the matter.

1

There are 1 best solutions below

0
On

...so while writing this question I searched around a bit more, and actually read the second answer here (by toutankh): vertical alignment of text element in SVG, which suggests using the attribute dominant-baseline instead of alignment-baseline for text objects. And it works perfectly.

Lesson learned: never read only the first answer to a SO question.