text-anchor

**text-anchor** CSS 属性用于对包含文本字符串的框进行对齐，其中包装区域由 inline-size 属性确定，然后将文本相对于元素的锚点放置，该锚点使用 x 和 y（或 dx 和 dy）属性定义。如果存在，CSS 属性的值将覆盖元素的 text-anchor 属性的任何值。

元素内的每个单独文本片段都是独立对齐的；因此，多行 <text> 元素的每一行文本都将根据 text-anchor 的值进行对齐。text-anchor 值仅对 <text>、<textPath>、<tref> 和 <tspan> SVG 元素有效。text-anchor 不适用于自动换行文本；为此，请参阅 text-align。

语法

css
text-anchor: start;
text-anchor: middle;
text-anchor: end;

/* Global values */
text-anchor: inherit;
text-anchor: initial;
text-anchor: revert;
text-anchor: revert-layer;
text-anchor: unset;

值

start

将文本对齐，使文本字符串的内联开始与锚点对齐。此对齐方式相对于文本的书写方向；因此，例如，在从右到左从上到下的书写中，文本将放置在锚点的左侧。如果文本的内联方向是垂直方向，例如许多亚洲语言，则文本的顶部边缘将与锚点对齐。

middle

将文本对齐，使文本字符串的内联框的中心（中间）与锚点对齐。

end

将文本对齐，使文本字符串的内联结束与锚点对齐。此对齐方式相对于文本的书写方向；因此，例如，在从右到左从上到下的书写中，文本将放置在锚点的右侧。如果文本的内联方向是垂直方向，例如许多亚洲语言，则文本的底部边缘将与锚点对齐。

正式定义

数据库中未找到值！

正式语法

text-anchor = 
  start   |
  middle  |
  end

示例

三个 <text> 元素具有相同的 x 位置，但 text-anchor 的值不同。包含一条虚线红线以标记所有三个锚点的 x 轴位置。

html
<svg
  viewBox="0 0 200 150"
  height="150"
  width="200"
  xmlns="http://www.w3.org/2000/svg">
  <line
    x1="100"
    y1="0"
    x2="100"
    y2="150"
    stroke="red"
    stroke-dasharray="10,5" />
  <text x="100" y="40">Anchored</text>
  <text x="100" y="80">Anchored</text>
  <text x="100" y="120">Anchored</text>
</svg>
css
text:nth-of-type(1) {
  text-anchor: start;
}
text:nth-of-type(2) {
  text-anchor: middle;
}
text:nth-of-type(3) {
  text-anchor: end;
}

规范

规范
可缩放矢量图形 (SVG) 2
# TextAnchoringProperties

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅