allineamento verticale dell'elemento di testo in SVG

142

Diciamo che ho il file 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>

Voglio in qualche modo allineare la parte superiore di ae b. In realtà, voglio che il mio posizionamento sia conforme a rooflineinvece di baseline!

svg vertical-alignment w3c

— SeMeKh
fonte

L'unica risposta che funziona in IE: stackoverflow.com/a/29089222/9069356

— Dominus.Vobiscum

116

La alignment-baselineproprietà è ciò che stai cercando può assumere i seguenti valori

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

Descrizione da W3C

Questa proprietà specifica come un oggetto è allineato rispetto al suo genitore. Questa proprietà specifica quale linea di base di questo elemento deve essere allineata con la linea di base corrispondente del genitore. Ad esempio, ciò consente alle linee di base alfabetiche nel testo romano di rimanere allineate tra le modifiche alla dimensione del carattere. L'impostazione predefinita è la linea di base con lo stesso nome del valore calcolato della proprietà linea di allineamento. Cioè, la posizione del punto di allineamento "ideografico" nella direzione di progressione del blocco è la posizione della linea di base "ideografica" nella tabella di base dell'oggetto da allineare.

Fonte W3C

Sfortunatamente, sebbene questo sia il modo "corretto" per ottenere ciò che stai cercando, sembra che Firefox non abbia implementato molti degli attributi di presentazione per il modulo di testo SVG ( documentazione MDN "SVG in Firefox" )

— Simon West
fonte

Non ho avuto fortuna con quello. Potresti fornire un esempio?

— SeMeKh,

2

A mio avviso la risposta migliore, dato che ha risposto alla mia senza dover navigare in una pagina di wall-of-text. Volevo visualizzare il mio testo su y = 0, ma era fuori schermo, quindi ho usato una regola CSS "allineamento- baseline: hanging ", e ha fatto esattamente quello che stavo cercando, il testo nel punto più alto del contenitore SVG, senza che un singolo pixel fosse fuori schermo.

— R. Hill,

1

@SeMeKh: Hmm per inciso, ha funzionato per me su Chromium, ma ora ho appena verificato che lo stesso non funziona su Firefox. Quindi, al momento, questa proprietà non è supportata in modo coerente tra i browser.

— R. Hill,

2

@ R. Hill Ecco il bugreport per firefox che è stato aperto oltre 11 anni fa bugzilla.mozilla.org/show_bug.cgi?id=308338 A proposito: Qual è la differenza tra 'medio' e 'centrale'?

— mxmlnkn,

9

Votato per errore e poiché ho fatto lo stesso errore prima, non posso annullarlo. ☹ alignment-baseline: centralfa non lavoro per SVG in Firefox, e che sembra essere di progettazione. dominant-baseline: centralfunziona in tutti i browser che ho provato finora, come indicato in questa risposta: stackoverflow.com/a/15997503/1450294

— Michael Scheper

227

Secondo SVG specifiche, alignment-baselinesi applica solo a <tspan>, <textPath>, <tref>e <altGlyph>. La mia comprensione è che viene utilizzato per compensare quelli <text>dall'oggetto sopra di loro. Penso che quello che stai cercando sia dominant-baseline.

I valori possibili di dominant-baselinesono:

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

Controllare la raccomandazione W3C per la proprietà della linea di base dominante per ulteriori informazioni su ogni possibile valore.

— toutankh
fonte

8

Ciò ha risolto i miei problemi con Firefox (che non funzionava con la proprietà "allineamento-base"). La "linea di base dominante" funziona su Chrome e Firefox. Grazie!

— Mariano Desanze,

5

Solo che a questo punto non funziona in nessuna versione di IE, quindi sfortunatamente non è davvero utile per molte applicazioni del mondo reale.

— Yona Appletree,

3

Poiché IE non supporta né la linea di base dominante né la linea di base dell'allineamento, è possibile verificare il supporto per la funzione in questo modo element.hasAttribute('dominant-baseline')e, se restituisce false, applicare dy=-0.4emcome indicato in questa risposta stackoverflow.com/a/29089222/2296470

— Tigran

1

linea di base dominante: centrale ha funzionato nel mio caso. Grazie!

— Liam Mitchell il

1

tenere presente che la linea di base dominante non è supportata da IE10-12 e Edge16

— japrescott

47

attr ("dominante", "centrale")

— user1087079
fonte

1

Questo si allinea al centro del personaggio (tanto quanto i glifi dei caratteri giocano bene), non sono sicuro di come questa sia una risposta qui a questa domanda.

— matanster

3

Questo è il metodo d3 o jquery per assegnare gli attributi

— glifo

1

Questa soluzione pone la linea di base al centro verticale del testo. Quindi la coordinata y è al centro verticale. Questa era la risposta che stavo cercando. Grazie.

— Henry,

1

Il nocciolo della risposta è corretto: imposta l'attributo di base dominante su centrale, tuttavia attr () non è una funzione JS nativa e non c'è alcuna spiegazione.

— jave.web,

30

Se lo stai testando in IE, la linea di base dominante e la linea di base dell'allineamento non sono supportate.

Il modo più efficace per centrare il testo in IE è usare qualcosa di simile con "dy":

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

Il valore negativo lo sposta in alto e un valore positivo di dy lo sposta in basso. Ho scoperto che usare -.4em mi sembra un po 'più centrato verticalmente rispetto a -.5em, ma tu ne sarai il giudice.

— whyoz
fonte

5

Grazie per avere l'unica risposta che funziona in IE. È un peccato che dobbiamo farlo, ma le altre risposte mi hanno fatto perdere molto tempo a far funzionare tutto in Chrome / FF, scoprendo quindi che non funziona in Internet Explorer durante i test del browser.

— Yona Appletree,

Decisione piacevole e semplice! E dovremmo ricordare di rimuovere l'attributo "allineamento-base" per omettere la sua influenza sulla posizione del testo nei browser che lo supportano.

— YaTaras,

7

Dopo aver esaminato la Raccomandazione SVG, ho capito che le proprietà della linea di base hanno lo scopo di posizionare il testo rispetto ad altri testi, specialmente quando si mescolano caratteri e / o lingue diverse. Se si desidera posizionare il testo in modo che sia in alto, è ynecessario utilizzarlo dy = "y + the height of your text".

— rjax
fonte

Apprezzo il link alla specifica, qualche lettura davvero utile lì. Non ero a conoscenza "<list-of-lengths>"dell'opzione (collegata) per esempio (consente la manipolazione per personaggio)

— brichins