vertikale Ausrichtung des Textelements in SVG
Sagen wir, 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 will irgendwie richten Sie die Obere der a
und b
. Eigentlich möchte ich meine Position nach der roofline
statt baseline
!
InformationsquelleAutor der Frage SeMeKh | 2012-09-03
Du musst angemeldet sein, um einen Kommentar abzugeben.
Den
alignment-baseline
Eigentum ist, was du suchst, es kann die folgenden Werte annehmenBeschreibung von w3c
W3C-Quelle
Leider, obwohl dies die "richtige" Art und Weise zu erreichen, was Sie nach erscheint es, als Firefox noch nicht implementiert eine Menge, die Präsentation Attribute der SVG-Text-Modul ('SVG in Firefox' MDN-Dokumentation)
InformationsquelleAutor der Antwort Simon West
Laut SVG-Spezifikation
alignment-baseline
gilt nur für<tspan>
<textPath>
<tref>
und<altGlyph>
. Mein Verständnis ist, dass es verwendet wird, um die offset-diejenigen, die von der<text>
Objekt über Ihnen. Ich denke was du suchst istdominant-baseline
.Mögliche Werte
dominant-baseline
sind:Überprüfen die W3C-Empfehlung für dominant-baseline Eigenschaft für mehr Informationen über jede mögliche Wert.
InformationsquelleAutor der Antwort toutankh
attr("dominant-baseline", "Mittel -")
InformationsquelleAutor der Antwort user1087079
Wenn Sie testen dieses im IE, dominant-baseline-und alignment-baseline werden nicht unterstützt.
Die effektivste Methode zum zentrieren von text im IE ist Sie etwas wie dies mit "dy":
Den negativen Wert ein, verschieben Sie es oben und einem positiven Wert von dy verschiebt es nach unten. Ich habe festgestellt, mit -.4em scheint ein wenig mehr vertikal zentriert, um mich als -.5em, aber Sie werden die Richter.
InformationsquelleAutor der Antwort whyoz
Nach einem Blick auf die SVG-Empfehlung ich habe kommen zu der Erkenntnis, dass die baseline-Eigenschaften werden gedacht, um text relativ zum anderen text, vor allem beim mischen von verschiedenen Schriftarten und oder Sprachen. Wenn Sie möchten, um die Position von text, so dass es oben ist an
y
dann müssen Sie verwendendy = "y + the height of your text"
.InformationsquelleAutor der Antwort rjax