CSS中的text-anchor属性详解

一、属性描述
text-anchor是SVG文本属性，用于控制文本相对于其锚点（起始点）的水平对齐方式。它类似于CSS中的text-align，但专门用于SVG文本元素。该属性在SVG图表、图标和文字排版中非常重要。

二、属性值详解
text-anchor有三个主要取值：

1. start（默认值）

   • 文本从左到右排列，起始位置与锚点对齐
   • 对于从左到右的文本，相当于左对齐
   • 示例：文本"Hello"的H字母位于锚点位置

2. middle

   • 文本在锚点处居中对齐
   • 文本的中心点与锚点重合
   • 示例：文本"Hello"的中心点（大致在l和l之间）位于锚点位置

3. end

   • 文本从右到左排列，结束位置与锚点对齐
   • 对于从左到右的文本，相当于右对齐
   • 示例：文本"Hello"的o字母位于锚点位置

三、实际应用示例

基本用法演示：

<svg width="400" height="150">
  <!-- 参考线 -->
  <line x1="200" y1="0" x2="200" y2="150" stroke="gray" stroke-dasharray="5"/>
  
  <!-- start对齐 -->
  <text x="200" y="30" text-anchor="start" font-size="20">Start对齐</text>
  <circle cx="200" cy="30" r="3" fill="red"/>
  
  <!-- middle对齐 -->
  <text x="200" y="70" text-anchor="middle" font-size="20">Middle对齐</text>
  <circle cx="200" cy="70" r="3" fill="red"/>
  
  <!-- end对齐 -->
  <text x="200" y="110" text-anchor="end" font-size="20">End对齐</text>
  <circle cx="200" cy="110" r="3" fill="red"/>
</svg>

四、与CSS text-align的区别

1. 作用范围不同

   • text-anchor：仅适用于SVG文本元素
   • text-align：适用于HTML块级元素

2. 参考基准不同

   • text-anchor：基于文本的锚点（x,y坐标）
   • text-align：基于容器的内容区域

3. 继承性

   • text-anchor可被继承，设置在外层<g>元素上会影响所有子文本

五、实际应用场景

1. 图表标签定位

<svg width="300" height="200">
  <!-- 柱状图 -->
  <rect x="50" y="50" width="40" height="80" fill="blue"/>
  <text x="70" y="40" text-anchor="middle">80</text>
  
  <rect x="120" y="70" width="40" height="60" fill="green"/>
  <text x="140" y="60" text-anchor="middle">60</text>
</svg>

2. 图标文字居中

<svg width="200" height="100">
  <circle cx="100" cy="50" r="30" fill="lightblue"/>
  <text x="100" y="55" text-anchor="middle" font-size="12">图标</text>
</svg>

六、注意事项

1. 多行文本处理

   • text-anchor对多行文本（使用<tspan>）的每一行都有效
   • 每行文本都基于同一个锚点进行对齐

2. 文本方向影响

   • 在从右到左的文本环境中，start和end的效果会反转
   • 可使用direction属性控制文本方向

3. 与dy属性配合

   • 可结合dy属性实现垂直方向的对齐控制
   • 示例：<text x="100" y="50" text-anchor="middle" dy="0.3em">文本</text>

text-anchor是SVG文本排版的核心属性，熟练掌握能让SVG文字布局更加精确和灵活。