简体   繁体   English

通过 svgwrite 在 SVG 中垂直 alignment

[英]Vertical alignment in SVG via svgwrite

I'm having issues with vertical alignment of texts when using the svgwrite python library.使用 svgwrite python 库时,我遇到垂直 alignment 文本的问题。

For example, here's a simple code that generates a red-filled circle with a black text saying "Text" on top of the circle:例如,下面是一个简单的代码,它生成一个红色填充的圆圈,圆圈顶部有一个黑色文本,上面写着“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()

The result is this expected image:结果是这个预期的图像:

在此处输入图像描述

However, I want the text to also be vertically aligned.但是,我希望文本也垂直对齐。

I tried using the alignment-baseline attribute of SVG, ie我尝试使用SVG的alignment-baseline属性,即

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 .但是,它不起作用-在 FireFox (垂直 alignment 不起作用)中也不起作用,在 Inkscape 中也不起作用,它抱怨 Unimplemented Unimplemented style property 363

I would appreciate any suggestions on how to solve the matter.我将不胜感激有关如何解决此问题的任何建议。

...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. ...所以在写这个问题时,我搜索了一下,实际上在这里阅读了第二个答案(通过 toutankh): vertical alignment of text element in SVG ,这建议使用属性dominant-baseline而不是alignment-baseline作为文本对象。 And it works perfectly.而且效果很好。

Lesson learned: never read only the first answer to a SO question.经验教训:永远不要只阅读 SO 问题的第一个答案。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM