文本对齐

详细介绍SVG的文本对齐属性，包括水平对齐、垂直对齐和基线控制。通过实例掌握SVG文本对齐的各种技巧。 SVG提供了text-anchor和dominant-baseline等属性来控制文本的对齐方式。

水平对齐 text-anchor

text-anchor属性控制文本相对于定位点的水平对齐方式。

三种对齐方式

<line x1="150" y1="20" x2="150" y2="130" stroke="#e74c3c" stroke-width="2" stroke-dasharray="5,5"/>

<text x="150" y="50" text-anchor="start" font-size="16" fill="#3498db">start 左对齐</text>
<text x="150" y="80" text-anchor="middle" font-size="16" fill="#2ecc71">middle 居中</text>
<text x="150" y="110" text-anchor="end" font-size="16" fill="#f39c12">end 右对齐</text>

对齐值说明

垂直对齐 dominant-baseline

dominant-baseline属性控制文本的垂直对齐方式。

<line x1="20" y1="90" x2="280" y2="90" stroke="#e74c3c" stroke-width="1" stroke-dasharray="5,5"/>

<text x="30" y="90" dominant-baseline="auto" font-size="14" fill="#333">auto</text>
<text x="80" y="90" dominant-baseline="middle" font-size="14" fill="#3498db">middle</text>
<text x="140" y="90" dominant-baseline="central" font-size="14" fill="#2ecc71">central</text>
<text x="200" y="90" dominant-baseline="hanging" font-size="14" fill="#f39c12">hanging</text>

基线值说明

实用案例

图标标签

<circle cx="60" cy="50" r="30" fill="#3498db"/>
<text x="60" y="50" text-anchor="middle" dominant-baseline="central" font-size="20" fill="white">A</text>
<text x="60" y="95" text-anchor="middle" font-size="12" fill="#333">首页</text>

<circle cx="150" cy="50" r="30" fill="#e74c3c"/>
<text x="150" y="50" text-anchor="middle" dominant-baseline="central" font-size="20" fill="white">B</text>
<text x="150" y="95" text-anchor="middle" font-size="12" fill="#333">关于</text>

<circle cx="240" cy="50" r="30" fill="#2ecc71"/>
<text x="240" y="50" text-anchor="middle" dominant-baseline="central" font-size="20" fill="white">C</text>
<text x="240" y="95" text-anchor="middle" font-size="12" fill="#333">联系</text>

数据标签

<rect x="30" y="100" width="50" height="30" fill="#3498db"/>
<text x="55" y="90" text-anchor="middle" font-size="14" font-weight="bold" fill="#333">30</text>

<rect x="90" y="70" width="50" height="60" fill="#e74c3c"/>
<text x="115" y="60" text-anchor="middle" font-size="14" font-weight="bold" fill="#333">60</text>

<rect x="150" y="40" width="50" height="90" fill="#2ecc71"/>
<text x="175" y="30" text-anchor="middle" font-size="14" font-weight="bold" fill="#333">90</text>

<rect x="210" y="20" width="50" height="110" fill="#f39c12"/>
<text x="235" y="10" text-anchor="middle" font-size="14" font-weight="bold" fill="#333">110</text>

行内对齐 alignment-baseline

alignment-baseline用于tspan元素，控制其相对于父文本的垂直对齐。

<text x="30" y="50" font-size="20">
  正常
  <tspan alignment-baseline="baseline" fill="#3498db">基线</tspan>
  <tspan alignment-baseline="middle" fill="#e74c3c">中线</tspan>
  <tspan alignment-baseline="hanging" fill="#2ecc71">悬挂</tspan>
</text>

垂直文本

通过writing-mode属性可以创建垂直文本。

<text x="50" y="20" writing-mode="vertical-rl" font-size="18" fill="#3498db">垂直文本</text>
<text x="100" y="20" writing-mode="vertical-rl" font-size="18" fill="#e74c3c">从右到左</text>
<text x="150" y="20" writing-mode="vertical-lr" font-size="18" fill="#2ecc71">从左到右</text>

属性总结