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