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 August 2016.
Die text-anchor CSS-Eigenschaft richtet eine Box aus, die eine Textzeichenfolge enthält, wobei der Umbruchbereich aus der inline-size-Eigenschaft bestimmt wird. Der Text wird dann relativ zum Ankerpunkt des Elements platziert, der mit den x und y (oder dx und dy) Attributen definiert ist. Ist 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 ein mehrzeiliges <text>-Element jede Textzeile gemäß dem Wert von text-anchor ausrichten. text-anchor-Werte haben nur auf die SVG-Elemente <text>, <textPath> und <tspan> eine Wirkung. text-anchor gilt nicht für automatisch umbrochenen Text; hierfür wird text-align empfohlen.
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. Bei einer Schreibrichtung von rechts nach links und oben nach unten wird der Text beispielsweise 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 die Mitte (das Zentrum) des Inline-Box 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. Bei einer Schreibrichtung von rechts nach links und oben nach unten wird der Text beispielsweise 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
| Anfangswert | start |
|---|---|
| Anwendbar auf | <text>, <textPath>, and <tspan> elements in <svg> |
| Vererbt | Ja |
| Berechneter Wert | wie angegeben |
| Animationstyp | diskret |
Formale Syntax
text-anchor =
start |
middle |
end
Beispiel
Drei <text>-Elemente erhalten die gleiche x-Position, aber unterschiedliche Werte für text-anchor. Eine gestrichelte rote Linie markiert die x-Achsen-Position aller drei Ankerpunkte.
<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 # TextAnchorProperty |
Browser-Kompatibilität
Loading…
Siehe auch
dominant-baseline- SVG
<text>-Element - SVG
text-anchor-Attribut