首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >在SVG中对齐文本

在SVG中对齐文本
EN

Stack Overflow用户
提问于 2008-09-11 12:24:24
回答 2查看 61K关注 0票数 70

我正在尝试制作混合有行和简短文本片段(通常是两个或三个单词)的SVG XML文档。我遇到的主要问题是让文本与线段对齐。

对于水平对齐,我可以将text-anchorleftmiddleright一起使用。我找不到垂直对齐的等价物;alignment-baseline似乎不能做到这一点,所以目前我正在使用dy="0.5ex"作为中心对齐的拼凑工具。

是否有适当的方式与文本的垂直中心或顶部对齐?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2008-09-16 14:57:14

事实证明,您不需要显式的文本路径。Firefox3只部分支持垂直对齐标签(see this thread)。它似乎只在作为样式应用时才起作用,而文本锚点可以是样式或标签属性的一部分。

代码语言:javascript
复制
<path d="M10, 20 L17, 20"
      style="fill:none; color:black; stroke:black; stroke-width:1.00"/>
<text fill="black" font-family="sans-serif" font-size="16"
      x="27" y="20" style="dominant-baseline: central;">
  Vertical
</text>

<path d="M60, 40 L60, 47"
      style="fill:none; color:red; stroke:red; stroke-width:1.00"/>
<text fill="red" font-family="sans-serif" font-size="16"
      x="60" y="70" style="text-anchor: middle;">
  Horizontal
</text>

<path d="M60, 90 L60, 97"
      style="fill:none; color:blue; stroke:blue; stroke-width:1.00"/>
<text fill="blue" font-family="sans-serif" font-size="16"
      x="60" y="97" style="text-anchor: middle; dominant-baseline: hanging;">
  Bit of Both
</text>

这在Firefox中是有效的。不幸的是,Inkscape似乎不能处理主导基线(或者至少不是以同样的方式)。

票数 61
EN

Stack Overflow用户

发布于 2014-05-15 22:25:49

此效果确实可以通过将alignment-baseline设置为centralmiddle来实现。

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

https://stackoverflow.com/questions/56402

复制
相关文章

相似问题

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