xml – 在SVG中对齐文本

发布时间：2020-12-16 08:15:07 所属栏目：百科来源：网络整理

导读：我试图使用混合的行和简要的文本片段(通常为两个或三个字)来制作SVG XML文档。我遇到的主要问题是让文本与线段对齐。对于水平对齐我可以使用文本锚定左，中间或右。我找不到垂直对齐的等价物; alignment-baseline似乎没有做到，所以目前我使用dy =“0.5ex”

我试图使用混合的行和简要的文本片段(通常为两个或三个字)来制作SVG XML文档。我遇到的主要问题是让文本与线段对齐。

对于水平对齐我可以使用文本锚定左，中间或右。我找不到垂直对齐的等价物; alignment-baseline似乎没有做到，所以目前我使用dy =“0.5ex”作为中心对齐的kludge。

有正确的方式与文本的垂直中心或顶部对齐吗？

原来，你不需要显式的文本路径。 Firefox 3仅部分支持垂直对齐标记( see this thread)。看起来，dominant-baseline只有在应用为样式时有效，而text-anchor可以是样式或标签属性的一部分。

<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似乎不处理主导基线(或至少不是以同样的方式)。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!