text-anchor
text-anchor 屬性用於將預格式化文字或自動換行文字（其中換行區域由 inline-size 屬性相對於給定點確定）進行對齊（起始、居中或末尾對齊）。
此屬性不適用於其他型別的自動換行文字。對於那些情況，您應該使用 text-align。對於多行文字，對齊發生在每一行。
text-anchor 屬性應用於給定 <text> 元素內的每個單獨的文字塊。每個文字塊都有一個初始的當前文字位置，該位置表示使用者座標系中的一個點，該點（取決於上下文）由 <text> 元素上的 x 和 y 屬性應用，或由分配給文字塊中第一個渲染字元的 <tspan> 元素上的任何 x 或 y 屬性值確定，或由 <textPath> 元素的初始當前文字位置確定。
注意： 作為演示屬性，text-anchor 還有一個對應的 CSS 屬性：text-anchor。當兩者都被指定時，CSS 屬性具有更高的優先順序。
你可以將此屬性與以下 SVG 元素一起使用
示例
<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 |
|---|---|
| 值 | start | middle | end |
| 可動畫的 | 離散 |
start-
渲染的字元被對齊，使得文字字串的起始點位於初始的當前文字位置。對於
ltr（通常用於大多數歐洲語言）的direction屬性值的元素，文字的左側將渲染在初始文字位置。對於rtl（通常用於阿拉伯語和希伯來語）的 direction 屬性值的元素，文字的右側將渲染在初始文字位置。對於具有垂直主文字方向（通常用於亞洲文字）的元素，文字的頂部將渲染在初始文字位置。 middle-
渲染的字元被對齊，使得文字字串的中間點位於當前的文字位置。（對於路徑上的文字，概念上是將文字字串首先沿直線佈局。確定文字字串的開始點和結束點之間的中點。然後，將文字字串對映到路徑上，並將此中點置於當前的文字位置。）
end-
渲染的字元被移動，使得最終渲染文字的末尾（在應用
text-anchor屬性之前的最終當前文字位置）位於初始的當前文字位置。對於ltr（通常用於大多數歐洲語言）的direction屬性值的元素，文字的右側將渲染在初始文字位置。對於rtl（通常用於阿拉伯語和希伯來語）的 direction 屬性值的元素，文字的左側將渲染在初始文字位置。對於具有垂直主文字方向（通常用於亞洲文字）的元素，文字的底部將渲染在初始文字位置。
規範
| 規範 |
|---|
| Scalable Vector Graphics (SVG) 2 # TextAnchorProperty |
瀏覽器相容性
載入中…
另見
- SVG
<text>元素 - CSS
text-anchor屬性