首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >通过svgwrite在SVG中进行垂直对齐

通过svgwrite在SVG中进行垂直对齐
EN

Stack Overflow用户
提问于 2021-02-22 06:08:22
回答 1查看 86关注 0票数 0

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

例如,下面是一个简单的代码,它生成一个红色填充的圆圈,圆圈顶部有一个黑色文本,上面写着" text“:

代码语言:javascript
复制
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属性,即

代码语言:javascript
复制
style='text-anchor:middle;\
       alignment-baseline:middle'

然而,它不起作用--无论是在FireFox (垂直对齐不起作用),还是在Inkscape中都不起作用,后者抱怨Unimplemented style property 363

如果有任何关于如何解决问题的建议,我将不胜感激。

EN

回答 1

Stack Overflow用户

发布于 2021-02-22 06:08:22

...so在写这个问题的时候,我搜索了更多,实际上阅读了第二个答案(由toutankh提供):vertical alignment of text element in SVG,它建议对文本对象使用属性dominant-baseline而不是alignment-baseline。而且它工作得很完美。

学到的教训:永远不要只读SO问题的第一个答案。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/66307666

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档