text-anchor

**text-anchor** 属性用于对齐（开始、中间或结束对齐）预格式化文本字符串或自动换行文本，其中换行区域由相对于给定点的 inline-size 属性确定。

此属性不适用于其他类型的自动换行文本。对于这些情况，应使用 text-align。对于多行文本，对齐将针对每一行进行。

text-anchor 属性应用于给定 <text> 元素内的每个单独文本块。每个文本块都有一个初始当前文本位置，该位置表示用户坐标系中由（取决于上下文）x 和 y 属性在 <text> 元素上的应用、x 或 y 属性值在显式分配给文本块中第一个渲染字符的 <tspan> 或 <tref> 元素上，或 <textPath> 元素的初始当前文本位置的确定产生的点。

注意：作为表示属性，text-anchor 可以用作 CSS 属性。有关更多信息，请参阅 text-anchor。

您可以将此属性与以下 SVG 元素一起使用

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization of anchors -->
  <path
    d="M60,15 L60,110 M30,40 L90,40 M30,75 L90,75 M30,110 L90,110"
    stroke="grey" />

  <!-- Anchors in action -->
  <text text-anchor="start" x="60" y="40">A</text>
  <text text-anchor="middle" x="60" y="75">A</text>
  <text text-anchor="end" x="60" y="110">A</text>

  <!-- Materialization of anchors -->
  <circle cx="60" cy="40" r="3" fill="red" />
  <circle cx="60" cy="75" r="3" fill="red" />
  <circle cx="60" cy="110" r="3" fill="red" />

  <style>
    <![CDATA[
      text {
        font: bold 36px Verdana, Helvetica, Arial, sans-serif;
      }
      ]]>
  </style>
</svg>

使用说明

默认值	`开始`
值	`start` \| `middle` \| `end`
可动画	离散

开始: 渲染的字符将对齐，使得文本字符串的开头位于初始当前文本位置。对于 direction 属性值为 ltr（大多数欧洲语言的典型值）的元素，文本的左侧将在初始文本位置处渲染。对于方向属性值为 rtl（阿拉伯语和希伯来语的典型值）的元素，文本的右侧将在初始文本位置处渲染。对于具有垂直主要文本方向（通常亚洲文本的典型值）的元素，文本的顶部将在初始文本位置处渲染。
中间: 渲染的字符将对齐，使得文本字符串的中间位于当前文本位置。（对于路径上的文本，从概念上讲，文本字符串首先在一行直线上布局。确定文本字符串的开头和结尾之间的中点。然后，将文本字符串映射到路径上，并将此中点放置在当前文本位置。）
end: 渲染的字符将移动，使得生成的渲染文本的末尾（应用 text-anchor 属性之前的最终当前文本位置）位于初始当前文本位置。对于 direction 属性值为 ltr（大多数欧洲语言的典型值）的元素，文本的右侧将在初始文本位置处渲染。对于方向属性值为 rtl（阿拉伯语和希伯来语的典型值）的元素，文本的左侧将在初始文本位置处渲染。对于具有垂直主要文本方向（通常亚洲文本的典型值）的元素，文本的底部将在初始文本位置处渲染。

规范

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

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

SVG <text> 元素
CSS text-anchor 属性