alignment-baseline

  • Revision slug: SVG/Attribute/alignment-baseline
  • Revision title: alignment-baseline
  • Revision id: 232736
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment page created, 159 words added

Revision Content

« 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 {{ cssxref("alignment-baseline","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

Elements

The following elements can use the alignment-baseline attribute

  • {{ SVGElement("tspan") }}
  • {{ SVGElement("tref") }}
  • {{ SVGElement("altGlyph") }}
  • {{ SVGElement("textPath") }}

See also

  • {{ cssxref("alignment-baseline","CSS alignment-baseline") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>alignment-baseline</code> 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.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("alignment-baseline","CSS alignment-baseline") }} for further information.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td><strong>auto</strong> | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | inherit</td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#AlignmentBaselineProperty" title="http://www.w3.org/TR/SVG11/text.html#AlignmentBaselineProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<h2 id="Example">Example</h2>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>alignment-baseline</code> attribute</p>
<ul> <li>{{ SVGElement("tspan") }}</li> <li>{{ SVGElement("tref") }}</li> <li>{{ SVGElement("altGlyph") }}</li> <li>{{ SVGElement("textPath") }}</li>
</ul>
<h2 id="See_also">See also</h2>
<ul> <li>{{ cssxref("alignment-baseline","CSS alignment-baseline") }}</li>
</ul>
Revert to this revision