Come centrare il testo ruotato di 90º in SVG

Lavorando con D3, voglio avere un'etichetta dell'asse Y che è ruotata di -90º e centrata sull'asse Y. Ho pensato che potrebbe essere un pezzo di torta, e scrive:Come centrare il testo ruotato di 90º in SVG

// Y Axis Label 
svg.append('svg:text') 
    .attr('class', 'y label') 
    .attr('text-anchor', 'middle') 
    .attr('y', 0) 
    .attr('width', height) 
    .attr('transform', 'translate(-' + yAxisSpacing + ',' + height + ') rotate(-90)') 
    .text('Y Axis Label')

height in questo caso è l'altezza del grafico (l'area occupata dalla verticale SVG). Il codice precedente renderà un elemento <text> in basso a sinistra del grafico, quindi centrerà il testo relativo a quel punto in basso a sinistra. Il width fa non cambia e quindi invece di essere centrato corre fuori dall'angolo in basso a sinistra della svg.

Avevo intuito che se il width fosse uguale allo height del grafico, il testo al suo interno verrebbe centrato verticalmente. Ciò non sembra essere il caso-O- c'è qualche proprietà di tipo magico display:block che ho bisogno di impostare in SVG in modo che width funzioni sull'elemento <text>.

Come dovrebbe essere fatto?

Sulla base delle risposte, sono andato con un percorso javascript e modificato la linea di cui sopra per essere (altezza/2) ...

.attr('transform', 'translate(-' + yAxisSpacing + ',' + height/2 + ') rotate(-90)')

fonte

2012-08-27 T. Stone

Un attributo width non ha effetto sul testo <> in SVG 1.1. Il testo sarà centrato (a causa di text-anchor = middle) attorno alla posizione x, y definita dagli attributi x e (per impostazione predefinita 0 se non li si specifica). Successivamente viene applicato l'attributo transform.

fonte

2012-08-28 06:36:22

Quindi, in altre parole, devo impostare manualmente la trasformazione x, y per centrare verticalmente con javascript. Speravo di farla franca con una soluzione CSS pura che potesse essere fluida con le dimensioni della pagina. –

Si potrebbe fare questo con i CSS trasformare. Aggiungi questo alla tua CSS (via http://css3please.com): Esempio

-webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
     transform: rotate(90deg); 
      filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
       M11=6.123031769111886e-17, M12=-1, M21=1, M22=6.123031769111886e-17, sizingMethod='auto expand'); 
      zoom: 1;

Lavorare qui - cercare nella scheda 'css': http://livecoding.io/3492918

fonte

2012-08-27 22:27:18

Nell'esempio l'etichetta dell'asse Y viene ruotata ma non centrata verticalmente, che è la parte che cercavo. –

Come centrare il testo ruotato di 90º in SVG

risposta

Problemi correlati