text-anchor CSS property
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit August 2016 browserübergreifend verfügbar.
Die text-anchor-CSS-Eigenschaft richtet eine Box, die eine Zeichenkette enthält, an einem Punkt aus, bei dem der Umwicklungsbereich durch die inline-size-Eigenschaft bestimmt wird. Der Text wird dann relativ zum Ankerpunkt des Elements platziert, der mithilfe der x- und y- (oder dx- und dy-) Attribute definiert ist. Falls 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 entsprechend dem text-anchor-Wert ausrichten. text-anchor-Werte wirken sich nur auf die SVG-Elemente <text>, <textPath> und <tspan> aus. text-anchor gilt nicht für automatisch umgebrochenen Text; dafür 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 Textzeichenkette mit dem Ankerpunkt ausgerichtet ist. Diese Ausrichtung ist relativ zur Schreibrichtung des Textes; so wird beispielsweise bei einer Rechts-nach-Links- und von-oben-nach-unten-Schreibrichtung 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 die Mitte (Mittelpunkt) der Textzeichenkette des Inline-Boxen mit dem Ankerpunkt ausgerichtet ist.
end-
Richtet den Text so aus, dass das Inline-Ende der Textzeichenkette mit dem Ankerpunkt ausgerichtet ist. Diese Ausrichtung ist relativ zur Schreibrichtung des Textes; so wird beispielsweise bei einer Rechts-nach-Links- und von-oben-nach-unten-Schreibrichtung 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
| 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 haben 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
| Spezifikation |
|---|
| Scalable Vector Graphics (SVG) 2 # TextAnchorProperty |
Browser-Kompatibilität
Siehe auch
dominant-baseline- SVG-
<text>-Element - SVG-
text-anchor-Attribut