wyrównanie w pionie elementu tekstowego w SVG

142

Powiedzmy, że mam plik SVG:

<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>

Chcę jakoś wyrównać górę ai b. Właściwie chcę, aby moje pozycjonowanie było zgodne rooflinez baseline!

svg vertical-alignment w3c SeMeKh
źródło
Jedyna odpowiedź, która działa w IE: stackoverflow.com/a/29089222/9069356
Dominus.Vobiscum

Odpowiedzi:

116

alignment-baselineNieruchomość jest to, czego szukasz to może przyjmować następujące wartości

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

Opis z w3c

Ta właściwość określa, w jaki sposób obiekt jest wyrównany w odniesieniu do jego rodzica. Ta właściwość określa, która linia bazowa tego elementu ma być wyrównana z odpowiednią linią bazową elementu nadrzędnego. Na przykład dzięki temu alfabetyczne linie bazowe w tekście łacińskim pozostają wyrównane przy zmianach rozmiaru czcionki. Domyślnie jest to linia bazowa o tej samej nazwie, co obliczona wartość właściwości alignment-baseline. Oznacza to, że położenie „ideograficznego” punktu wyrównania w kierunku postępu bloku jest położeniem „ideograficznej” linii bazowej w tabeli linii bazowych dopasowywanego obiektu.

Źródło W3C

Niestety, chociaż jest to „poprawny” sposób osiągnięcia tego, czego oczekujesz, wydaje się, że Firefox nie zaimplementował wielu atrybutów prezentacji dla modułu tekstowego SVG ( Dokumentacja MDN „SVG w Firefoksie” )

Simon West
źródło
Nie miałem z tym szczęścia. Czy mógłbyś podać przykład?
SeMeKh
2
Moim zdaniem najlepsza odpowiedź, ponieważ odpowiedziała moja bez konieczności przechodzenia do strony ze ścianą tekstu. Chciałem wyświetlić mój tekst na y = 0, ale to było poza ekranem, więc użyłem reguły CSS "wyrównanie- baseline: hanging ”, i zrobił dokładnie to, czego szukałem, tekst w najwyższym punkcie w kontenerze SVG, bez ani jednego piksela poza ekranem.
R. Hill,
1
@SeMeKh: Hmm, nawiasem mówiąc, działało u mnie na Chromium, ale teraz właśnie zweryfikowałem, że to samo nie działa w Firefoksie. Wygląda więc na to, że ta właściwość nie jest obecnie spójnie obsługiwana we wszystkich przeglądarkach.
R. Hill,
2
@ R.Hill Oto raport o błędach dla Firefoksa, który został otwarty ponad 11 lat temu bugzilla.mozilla.org/show_bug.cgi?id=308338 Btw: Jaka jest różnica między „średnim” a „centralnym”?
mxmlnkn
9
Głosowano za pozytywnym głosem przez pomyłkę, a ponieważ popełniłem już ten sam błąd, nie mogę tego cofnąć. ☹ alignment-baseline: centralrobi nie praca dla pomostów żylnych w Firefox, a to wydaje się być zgodne z projektem. dominant-baseline: centraldziała w każdej przeglądarce, którą do tej pory wypróbowałem, jak wskazano w tej odpowiedzi: stackoverflow.com/a/15997503/1450294
Michael Scheper
227

Według specyfikacji SVG, alignment-baselinetylko odnosi się do <tspan>, <textPath>, <tref>i <altGlyph>. Rozumiem, że jest używany do odsunięcia tych od <text>obiektu nad nimi. Myślę, że to, czego szukasz dominant-baseline.

Możliwe wartości dominant-baselineto:

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

Sprawdzić zalecenia W3C dla dominujące podstawowej właściwości , aby uzyskać więcej informacji na temat każdej możliwej wartości.

toutankh
źródło
8
To rozwiązało moje problemy z Firefoksem (który nie działał z właściwością „alignment-baseline”). „Dominant-baseline” działa w przeglądarkach Chrome i Firefox. Dzięki!
Mariano Desanze
5
Tyle że w tym momencie nie działa to w żadnej wersji IE, więc niestety nie jest to przydatne w wielu rzeczywistych aplikacjach.
Yona Appletree
3
Ponieważ IE nie obsługuje ani dominant-baseline, ani alignment-baseline, możesz sprawdzić obsługę takiej funkcji element.hasAttribute('dominant-baseline'), a jeśli zwraca wartość false, zastosuj, dy=-0.4emjak opisano w tej odpowiedzi stackoverflow.com/a/29089222/2296470
Tigran
1
dominant-baseline: centralny zadziałał w moim przypadku. dzięki!
Liam Mitchell
1
należy pamiętać, że dominant-baseline nie jest obsługiwany przez IE10-12 i Edge16
japrescott
47

attr ("dominująca linia bazowa", "centralna")

user1087079
źródło
1
Jest to wyrównane do środka postaci (o ile glify czcionek grają ładnie), nie jestem pewien, jak to jest odpowiedź na to pytanie.
matanster
3
To jest metoda przypisywania atrybutów d3 lub jquery
glif
1
To rozwiązanie powoduje umieszczenie linii bazowej w pionowym środku tekstu. Więc współrzędna y jest w środku pionu. To była odpowiedź, której szukałem. Dzięki.
Henry
1
Rdzeń odpowiedzi jest poprawny - ustaw atrybut dominant-baseline na central, jednak attr () nie jest natywną funkcją JS i nie ma żadnego wyjaśnienia.
jave.web
30

Jeśli testujesz to w IE, dominant-baseline i alignment-baseline nie są obsługiwane.

Najskuteczniejszym sposobem wyśrodkowania tekstu w IE jest użycie czegoś takiego z „dy”:

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

Ujemna wartość przesunie go w górę, a dodatnia wartość dy - w dół. Zauważyłem, że użycie -.4em wydaje mi się nieco bardziej wyśrodkowane w pionie niż -.5em, ale będziesz tego oceniać.

Whyoz
źródło
5
Dziękuję za jedyną odpowiedź, która działa w IE. Szkoda, że ​​musimy to zrobić, ale inne odpowiedzi zmarnowały mi znaczną ilość czasu, aby wszystko działało w Chrome / FF, a następnie okazało się, że nie działa w IE podczas testowania przeglądarki.
Yona Appletree
Miła i prosta decyzja! Powinniśmy również pamiętać o usunięciu atrybutu „alignment-baseline”, aby uniknąć jego wpływu na pozycję tekstu w przeglądarkach, które go obsługują.
YaTaras
7

Po zapoznaniu się z zaleceniem SVG doszedłem do wniosku, że właściwości linii bazowej mają na celu pozycjonowanie tekstu względem innego tekstu, zwłaszcza podczas mieszania różnych czcionek i / lub języków. Jeśli chcesz opublikować tekst tak, aby był na górze y, musisz użyć dy = "y + the height of your text".

rjax
źródło
Doceń link do specyfikacji, kilka naprawdę przydatnych lektur. Na przykład nie wiedziałem o (połączonej) "<list-of-lengths>"opcji (pozwala na manipulację postacią)
brichins