通过 svgwrite 在 SVG 中垂直对齐答案

【问题标题】：Vertical alignment in SVG via svgwrite通过 svgwrite 在 SVG 中垂直对齐
【发布时间】：2021-05-24 05:18:24
【问题描述】：

我在使用 svgwrite python 库时遇到文本垂直对齐问题。

例如，下面是一个简单的代码，它生成一个红色填充的圆圈，圆圈顶部有一个黑色文本，上面写着“Text”：

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()

结果是这个预期的图像：

但是，我希望文本也垂直对齐。

我尝试使用 SVG 的 alignment-baseline 属性，即

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

但是，它不起作用 - 在 FireFox（垂直对齐不起作用）和 Inkscape 中都不起作用，它抱怨 Unimplemented style property 363。

对于如何解决此问题的任何建议，我将不胜感激。

【问题讨论】：

标签： python svg inkscape svgwrite

【解决方案1】：

...所以在写这个问题时，我搜索了更多，实际上在这里阅读了 second 答案（通过 toutankh）： vertical alignment of text element in SVG, 这建议对文本对象使用属性dominant-baseline 而不是alignment-baseline。而且效果很好。

经验教训：永远不要只阅读 SO 问题的第一个答案。

【讨论】：