alignment-baseline

« SVG 属性参考主页

alignment-baseline属性指定了一个对象如何相对于它的父元素对齐。这个属性指定了该元素的基线对齐到相应的父元素的基线。举个例子，允许罗马文字中的字母表基线在字体大小发生变化时保持一致。它的默认值是 baseline，与该alignment-baseline属性的计算值同名。

作为一个外观属性，它还可以直接作为 CSS 样式表内部的属性使用。请阅读CSS alignment-baseline以了解更多信息。

用法

类别	外观属性
值	auto \| baseline \| before-edge \| text-before-edge \| middle \| central \| after-edge \| text-after-edge \| ideographic \| alphabetic \| hanging \| mathematical \| inherit
可变性	Yes
规范文档	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 属性：

如果对象要在别的元素中对齐（比如在<text>元素中），请阅读dominant-baseline。

规范

Specification
CSS Inline Layout Module Level 3 # alignment-baseline-property
Scalable Vector Graphics (SVG) 2 # AlignmentBaselineProperty

参见

CSS alignment-baseline