MDN wants to talk to developers like you: https://qsurvey.mozilla.com/s3/8d22564490d8

alignment-baseline

我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 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)

Example

<?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>

Live sample

Elements

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,