对齐 SVG 中的文本
Posted
技术标签:
【中文标题】对齐 SVG 中的文本【英文标题】:Aligning text in SVG 【发布时间】:2010-09-08 13:20:58 【问题描述】:我正在尝试制作包含线条和简短文本 sn-ps(通常是两个或三个单词)的 SVG XML 文档。我遇到的主要问题是让文本与线段对齐。
对于水平对齐,我可以使用text-anchor
和left
、middle
或right
。我找不到垂直对齐的等价物; alignment-baseline
似乎没有这样做,所以目前我使用 dy="0.5ex"
作为中心对齐的工具。
是否有适当的方式与文本的垂直中心或顶部对齐?
【问题讨论】:
我认为您的水平假设存在错误。根据w3.org/TR/SVG/text.html#TextAnchorProperty,text-anchor
的允许值为start | middle | end | inherit
。不允许“左”和“右”。
【参考方案1】:
事实证明,您不需要明确的文本路径。 Firefox 3 仅部分支持垂直对齐标签 (see this thread)。似乎主导基线仅在作为样式应用时才有效,而 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 似乎没有处理主导基线(或者至少不是以相同的方式)。
【讨论】:
遗憾的是,截至 2011 年 11 月,Firefox 仍然是唯一支持dominant-baseline
的浏览器。我仍然需要<text font-size="12px"><tspan dy="6px">off set by 1/2 font size</tspan></text>
。
我会说至少 Chrome 也支持它。
Safari 现在好像支持了。【参考方案2】:
这个效果确实可以通过将alignment-baseline
设置为central
或者middle
来实现。
【讨论】:
以上是关于对齐 SVG 中的文本的主要内容,如果未能解决你的问题,请参考以下文章
如何在引导程序中将同一行中的 svg 图标和文本内容对齐到右侧(右对齐)
TailwindCSS FontAwesome svg 图标未对齐