alignment-baseline

Das Attribut alignment-baseline gibt an, wie ein Objekt in Bezug auf sein übergeordnetes Element ausgerichtet wird. Diese Eigenschaft legt fest, welche Basislinie dieses Elements mit der entsprechenden Basislinie des Elternteils ausgerichtet werden soll. Zum Beispiel ermöglicht dies, dass alphabetische Basislinien in römischem Text über Schriftgrößenänderungen hinweg ausgerichtet bleiben. Standardmäßig wird die Basislinie mit demselben Namen wie der berechnete Wert der alignment-baseline-Eigenschaft verwendet.

Hinweis: Als Präsentationsattribut besitzt alignment-baseline auch ein entsprechendes CSS-Property: alignment-baseline. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

Dieses Attribut kann mit den folgenden SVG-Elementen verwendet werden:

Anwendungshinweise

Wert auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | top | center | bottom
Standardwert auto
Animierbar Ja
auto Veraltet

Der Wert entspricht der "dominant-baseline" des Skripts, zu dem das Zeichen gehört – d. h. die "dominant-baseline" des Elternteils wird verwendet.

baseline

Verwendet die dominant-baseline-Auswahl des Elternteils. Stimmt die entsprechende Basislinie der Box mit der des Elternteils ab.

before-edge Veraltet

Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "before-edge"-Basislinie des Textinhalts des Elternteils ausgerichtet.

text-bottom

Stimmt den unteren Rand der Box mit dem oberen Rand des Inhaltsbereichs des Elternteils ab.

text-before-edge

Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "text-before-edge"-Basislinie des Textinhalts des Elternteils ausgerichtet.

Hinweis: Dieses Schlüsselwort kann auf text-top abgebildet werden.

middle

Richtet den vertikalen Mittelpunkt der Box an der Basislinie des übergeordneten Elements plus die Hälfte der x-Höhe des Elternteils aus.

central

Stimmt die zentrale Basislinie der Box mit der zentralen Basislinie des übergeordneten Elements ab.

after-edge Veraltet

Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "after-edge"-Basislinie des Textinhalts des Elternteils ausgerichtet.

text-top

Stimmt den oberen Rand der Box mit dem oberen Rand des Inhaltsbereichs des Elternteils ab.

text-after-edge

Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "text-after-edge"-Basislinie des Textinhalts des Elternteils ausgerichtet.

Hinweis: Dieses Schlüsselwort kann auf text-bottom abgebildet werden.

ideographic

Stimmt die ideografische Zeichenunterseite der Box mit der des Elternteils ab.

alphabetic

Stimmt die alphabetische Basislinie der Box mit der des Elternteils ab.

hanging

Der Ausrichtungspunkt des auszurichtenden Objekts wird mit der "hanging"-Basislinie des Textinhalts des Elternteils ausgerichtet.

mathematical

Stimmt die mathematische Basislinie der Box mit der des Elternteils ab.

top

Richtet den oberen Rand des ausgerichteten Teilbaums mit dem oberen Rand der Linienbox aus.

center

Richtet das Zentrum des ausgerichteten Teilbaums mit dem Zentrum der Linienbox aus.

bottom

Richtet den unteren Rand des ausgerichteten Teilbaums mit dem unteren Rand der Linienbox aus.

SVG 2 führt einige Änderungen in der Definition dieser Eigenschaft ein. Insbesondere wurden die Werte auto, before-edge und after-edge entfernt. Zur Abwärtskompatibilität können text-before-edge auf text-top und text-after-edge auf text-bottom abgebildet werden. Weder text-before-edge noch text-after-edge sollten mit der vertical-align-Eigenschaft verwendet werden.

Beispiel

html
<svg
  width="300"
  height="120"
  viewBox="0 0 300 120"
  xmlns="http://www.w3.org/2000/svg">
  <!-- Materialization 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>

  <!-- Materialization 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>

Für die Objektausrichtung in anderen Elementen (wie <text>), siehe dominant-baseline.

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
alignment-baseline

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch