xml - 对齐 SVG 中的文本

Question

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

对于水平对齐，我可以text-anchor使用left,middle或right。我找不到垂直对齐的等价物；alignment-baseline似乎没有这样做，所以目前我正在dy="0.5ex"用作中心对齐的工具。

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

Answer 1

事实证明，您不需要明确的文本路径。Firefox 3 仅部分支持垂直对齐标签（请参阅此线程）。似乎主导基线仅在作为样式应用时才有效，而 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 似乎没有处理主导基线（或者至少不是以相同的方式）。

Answer 2

这种效果确实可以通过设置alignment-baseline为central或来实现middle。