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 屬性