在SVG中对齐文本


70

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

对于水平对齐方式,我可以使用text-anchorleftmiddleright。我找不到等效的垂直对齐方式。alignment-baseline似乎没有做到这一点,所以目前我dy="0.5ex"用作中心对齐的摇杆。

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


17
我认为您的水平假设有误。据w3.org/TR/SVG/text.html#TextAnchorProperty为允许值text-anchorstart | middle | end | inherit。不允许使用“左”和“右”。
2012年

Answers:


61

事实证明,您不需要显式的文本路径。Firefox 3仅部分支持垂直对齐标记(请参阅此线程)。似乎主要基准线仅在作为样式应用时才有效,而文本锚可以是样式或标签属性的一部分。

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


1
遗憾的是,截至2011年11月,Firefox仍然是唯一支持的浏览器dominant-baseline。我仍然需要一个<text font-size="12px"><tspan dy="6px">off set by 1/2 font size</tspan></text>
特拉维斯,

我说至少Chrome也支持它。
jjmontes

Safari现在似乎支持它。
弥敦道(Nathan Villaescusa)

2

通过设置alignment-baselinecentral或,确实可以实现此效果middle

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.