MDN wants to learn about developers like you:

我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 English (US) 版本。

« SVG Attribute reference home

The alignment-baseline attribute specifies how an object is aligned with respect to its parent. This property specifies which baseline of this element is to be aligned with the corresponding baseline of the parent. For example, this allows alphabetic baselines in Roman text to stay aligned across font size changes. It defaults to the baseline with the same name as the computed value of the alignment-baseline property.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see css alignment-baseline for further information.

Usage context

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="" 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" />

    font: bold 36px Verdana, Helvetica, Arial, sans-serif;

Live sample


The following elements can use the alignment-baseline attribute

For object alignment in other elements (such as <text>), see dominant-baseline.

See also


 此頁面的貢獻者: caesarsol, MaxArt, Jeremie
 最近更新: caesarsol,