alignment-baseline（对齐基线）
alignment-baseline属性指定一个对象相对于其父对象的对齐方式。此属性指定此元素的哪个基线将与父级元素的相应基线对齐。例如，这允许罗马文字中的字母基线在字体大小变化上保持对齐。它默认为与alignment-baseline属性的计算值同名的基线。
作为一个表现属性，它也可以直接在一个CSS样式表中作为属性使用，请参阅css alignment-baseline进一步的信息。
用法上下文
Categories | Presentation attribute |
|---|---|
Value | auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit |
Animatable | Yes |
Normative document | SVG 1.1 (2nd Edition) |
实例
<?xml version="1.0"?>
<svg width="300" height="120" viewBox="0 0 300 120"
? ? ?xmlns="http://www.w3.org/2000/svg" version="1.1">
? ? <!-- Materialisation of anchors -->
? ? <path d="M60,10 L60,110?
? ? ? ? ? ? ?M30,10 L300,10?
? ? ? ? ? ? ?M30,65 L300,65?
? ? ? ? ? ? ?M30,110 L300,110
? ? ? ? ? ? ?" stroke="grey" />
? ??
? ? <!-- Anchors in action -->
? ? <text alignment-baseline="hanging"
? ? ? ? ? x="60" y="10">A hanging</text>
? ? <text alignment-baseline="middle"
? ? ? ? ? x="60" y="65">A middle</text>
? ? <text alignment-baseline="baseline"
? ? ? ? ? x="60" y="110">A baseline</text>
? ? <!-- Materialisation of anchors -->
? ? <circle cx="60" cy="10" r="3" fill="red" />
? ? <circle cx="60" cy="65" 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>实时样例
适用元素
以下元素可以使用该alignment-baseline属性
<tspan>
<tref>
<altGlyph>
<textPath>
对于其他元素（如<text>）中的对象对齐，请参阅dominant-baseline。
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
