vertikale Ausrichtung des Textelements in SVG

142

Angenommen, ich habe die SVG-Datei:

<svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text x='20' y='60' style="font-size: 60px">b</text>
    <text x='100' y='60' style="font-size: 60px">a</text>
</svg>

Ich möchte irgendwie die Oberseite von aund ausrichten b. Eigentlich möchte ich, dass meine Positionierung der entspricht, rooflineanstatt baseline!

svg vertical-alignment w3c SeMeKh
quelle
Die einzige Antwort, die im IE funktioniert: stackoverflow.com/a/29089222/9069356
Dominus.Vobiscum

Antworten:

116

Die alignment-baselineEigenschaft ist das, wonach Sie suchen. Sie kann die folgenden Werte annehmen

auto | baseline | before-edge | text-before-edge | 
middle | central | after-edge | text-after-edge | 
ideographic | alphabetic | hanging | mathematical | 
inherit

Beschreibung von w3c

Diese Eigenschaft gibt an, wie ein Objekt in Bezug auf sein übergeordnetes Objekt ausgerichtet wird. Diese Eigenschaft gibt an, welche Grundlinie dieses Elements an der entsprechenden Grundlinie des übergeordneten Elements ausgerichtet werden soll. Auf diese Weise können beispielsweise alphabetische Basislinien in römischem Text über Änderungen der Schriftgröße hinweg ausgerichtet bleiben. Der Standardwert ist die Grundlinie mit demselben Namen wie der berechnete Wert der Eigenschaft Ausrichtung-Grundlinie. Das heißt, die Position des "ideografischen" Ausrichtungspunkts in Blockverlaufsrichtung ist die Position der "ideografischen" Grundlinie in der Grundlinientabelle des auszurichtenden Objekts.

W3C-Quelle

Obwohl dies der "richtige" Weg ist, um das zu erreichen, wonach Sie suchen, hat Firefox leider nicht viele der Präsentationsattribute für das SVG-Textmodul implementiert ( MDN-Dokumentation "SVG in Firefox" ).

Simon West
quelle
Hatte damit kein Glück. Könnten Sie ein Beispiel geben?
SeMeKh
2
Meiner Meinung nach die beste Antwort, da sie auf meine antwortete, ohne zu einer Textwandseite navigieren zu müssen. Ich wollte meinen Text bei y = 0 anzeigen, aber er war außerhalb des Bildschirms, daher habe ich eine CSS-Regel "Ausrichtung-" verwendet. Grundlinie: hängen ", und es hat genau das getan, wonach ich gesucht habe, Text am höchsten Punkt im SVG-Container, ohne dass ein einzelnes Pixel außerhalb des Bildschirms liegt.
R. Hill
1
@SeMeKh: Hmm übrigens, es hat bei Chromium für mich funktioniert, aber jetzt habe ich nur überprüft, dass das auch bei Firefox nicht funktioniert. Es scheint also, dass diese Eigenschaft derzeit in allen Browsern nicht konsistent unterstützt wird.
R. Hill
2
@ R.Hill Hier ist der Bugreport für Firefox, der vor über 11 Jahren eröffnet wurde. Bugzilla.mozilla.org/show_bug.cgi?id=308338 Übrigens : Was ist der Unterschied zwischen "mittel" und "zentral"?
mxmlnkn
9
Aus Versehen upvoted, und weil ich den gleichen Fehler zuvor gemacht habe, kann ich ihn nicht rückgängig machen. ☹ alignment-baseline: centralfunktioniert nicht für SVGs in FireFox, und das scheint beabsichtigt zu sein. dominant-baseline: centralfunktioniert in jedem Browser, den ich bisher ausprobiert habe, wie in dieser Antwort angegeben: stackoverflow.com/a/15997503/1450294
Michael Scheper
227

Nach SVG - Spezifikation, alignment-baselinegilt nur für <tspan>, <textPath>, <tref>und <altGlyph>. Mein Verständnis ist, dass es verwendet wird, um diese von dem <text>Objekt über ihnen zu versetzen . Ich denke, was Sie suchen, ist dominant-baseline.

Mögliche Werte von dominant-baselinesind:

auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit

Weitere Informationen zu jedem möglichen Wert finden Sie in der W3C-Empfehlung für die Eigenschaft " Dominant-Baseline" .

toutankh
quelle
8
Dies hat meine Probleme mit Firefox behoben (das nicht mit der Eigenschaft "Ausrichtungsbasislinie" funktionierte). Die "Dominant-Baseline" funktioniert unter Chrome & Firefox. Vielen Dank!
Mariano Desanze
5
Abgesehen davon, dass dies derzeit in keiner IE-Version funktioniert, ist es für viele reale Anwendungen leider nicht so nützlich.
Yona Appletree
3
Da der IE weder die dominante Basislinie noch die Ausrichtungsbasislinie unterstützt, können Sie die Unterstützung für diese Funktion überprüfen. element.hasAttribute('dominant-baseline')Wenn sie falsch zurückgibt, gilt dies dy=-0.4emwie in dieser Antwort beschrieben. Stackoverflow.com/a/29089222/2296470
Tigran
1
Dominant-Baseline: Zentral funktioniert in meinem Fall. Vielen Dank!
Liam Mitchell
1
Beachten Sie, dass die Dominant-Baseline von IE10-12 und Edge16 nicht unterstützt wird
japrescott
47

attr ("dominante Basislinie", "zentral")

user1087079
quelle
1
Dies wird durch die Mitte des Zeichens ausgerichtet (so gut die Schriftzeichen gut funktionieren), nicht sicher, wie dies hier eine Antwort auf diese Frage ist.
Matanster
3
Dies ist d3 oder jquery Methode zum Zuweisen von Attributen
Glyphe
1
Diese Lösung platziert die Grundlinie in der vertikalen Mitte des Textes. Die y-Koordinate befindet sich also in der vertikalen Mitte. Dies war die Antwort, nach der ich gesucht habe. Vielen Dank.
Henry
1
Der Kern der Antwort ist korrekt - setzen Sie das Attribut "Dominant-Baseline" auf "Central". Attr () ist jedoch keine native JS-Funktion und es gibt überhaupt keine Erklärung.
jave.web
30

Wenn Sie dies im IE testen, werden Dominant-Baseline und Alignment-Baseline nicht unterstützt.

Der effektivste Weg, um Text im IE zu zentrieren, besteht darin, mit "dy" so etwas zu verwenden:

<text font-size="ANY SIZE" text-anchor="middle" "dy"="-.4em"> Ya Text </text>

Der negative Wert verschiebt es nach oben und ein positiver Wert von dy verschiebt es nach unten. Ich habe festgestellt, dass die Verwendung von -.4em für mich vertikal etwas zentrierter erscheint als -.5em, aber Sie werden das beurteilen.

Whyoz
quelle
5
Vielen Dank, dass Sie die einzige Antwort haben, die im IE funktioniert. Es ist eine Schande, dass wir dies tun müssen, aber die anderen Antworten haben mich viel Zeit verschwendet, damit alles in Chrome / FF funktioniert, und dann festgestellt, dass es beim Testen des Browsers im IE nicht funktioniert.
Yona Appletree
Schöne und einfache Entscheidung! Und wir sollten daran denken, das Attribut "Alignment-Baseline" zu entfernen, um seinen Einfluss auf die Textposition in Browsern, die es unterstützen, wegzulassen.
YaTaras
7

Nachdem ich mir die SVG-Empfehlung angesehen habe, bin ich zu dem Verständnis gekommen, dass die Baseline-Eigenschaften dazu gedacht sind, Text relativ zu anderem Text zu positionieren, insbesondere beim Mischen verschiedener Schriftarten und / oder Sprachen. Wenn Sie Text so positionieren möchten, dass er oben ist y, müssen Sie ihn verwenden dy = "y + the height of your text".

rjax
quelle
Schätzen Sie den Link zur Spezifikation, einige wirklich nützliche Lektüre dort. War sich der (verknüpften) "<list-of-lengths>"Option zum Beispiel nicht bewusst (erlaubt die Manipulation pro Charakter)
Brichins