text-anchor
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die text-anchor
CSS Eigenschaft richtet eine Box aus, die eine Textzeichenfolge enthält, wobei der umschließende Bereich durch die inline-size
Eigenschaft bestimmt wird. Der Text wird dann relativ zum Ankerpunkt des Elements platziert, der über die x
und y
(oder dx
und dy
) Attribute definiert wird. Wenn vorhanden, überschreibt der Wert der CSS-Eigenschaft jeden Wert des text-anchor
Attributs des Elements.
Jedes einzelne Textfragment innerhalb eines Elements wird unabhängig ausgerichtet; daher wird bei einem mehrzeiligen <text>
-Element jede Textzeile entsprechend dem Wert von text-anchor
ausgerichtet. text-anchor
-Werte haben nur eine Wirkung auf die <text>
, <textPath>
, <tref>
und <tspan>
SVG-Elemente. text-anchor
gilt nicht für automatisch umbrochenen Text; hierzu siehe text-align
.
Syntax
text-anchor: start;
text-anchor: middle;
text-anchor: end;
/* Global values */
text-anchor: inherit;
text-anchor: initial;
text-anchor: revert;
text-anchor: revert-layer;
text-anchor: unset;
Werte
start
-
Richtet den Text so aus, dass der Inline-Start der Textzeichenfolge mit dem Ankerpunkt übereinstimmt. Diese Ausrichtung ist relativ zur Schreibrichtung des Textes; so wird bei einer Schreibrichtung von rechts nach links, von oben nach unten, der Text links vom Ankerpunkt platziert. Wenn die Inline-Richtung des Textes vertikal ist, wie bei vielen asiatischen Sprachen, wird die obere Kante des Textes mit dem Ankerpunkt ausgerichtet.
middle
-
Richtet den Text so aus, dass das Zentrum (Mitte) des Inline-Kastens der Textzeichenfolge mit dem Ankerpunkt übereinstimmt.
end
-
Richtet den Text so aus, dass das Inline-Ende der Textzeichenfolge mit dem Ankerpunkt übereinstimmt. Diese Ausrichtung ist relativ zur Schreibrichtung des Textes; so wird bei einer Schreibrichtung von rechts nach links, von oben nach unten, der Text rechts vom Ankerpunkt platziert. Wenn die Inline-Richtung des Textes vertikal ist, wie bei vielen asiatischen Sprachen, wird die untere Kante des Textes mit dem Ankerpunkt ausgerichtet.
Formale Definition
Initialer Wert | start |
---|---|
Anwendbar auf | text , textpath , and tspan elements in an svg |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | diskret |
Formale Syntax
Beispiel
Drei <text>
Elemente haben die gleiche x
Position, aber unterschiedliche Werte für text-anchor
. Eine gestrichelte rote Linie ist enthalten, um die x-Achsenposition aller drei Ankerpunkte zu markieren.
<svg
viewBox="0 0 200 150"
height="150"
width="200"
xmlns="http://www.w3.org/2000/svg">
<line
x1="100"
y1="0"
x2="100"
y2="150"
stroke="red"
stroke-dasharray="10,5" />
<text x="100" y="40">Anchored</text>
<text x="100" y="80">Anchored</text>
<text x="100" y="120">Anchored</text>
</svg>
text:nth-of-type(1) {
text-anchor: start;
}
text:nth-of-type(2) {
text-anchor: middle;
}
text:nth-of-type(3) {
text-anchor: end;
}
Spezifikationen
Specification |
---|
Scalable Vector Graphics (SVG) 2 # TextAnchoringProperties |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
dominant-baseline
- SVG
<text>
Element - SVG
text-anchor
Attribut