Cómo centrar texto girado a 90º en SVG

Al trabajar con D3, quiero tener una etiqueta de eje Y que se gire -90º y se centre en el eje Y. Pensé que esto sería un pedazo de la torta, y escribió el siguiente:Cómo centrar texto girado a 90º en 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 en este caso es la altura de la carta (el área vertical ocupado por SVG). El código anterior representará un elemento <text> en la esquina inferior izquierda del gráfico, luego centre el texto relativo al punto inferior izquierdo. El width no cambia y, por lo tanto, en lugar de estar centrado se ejecuta en la esquina inferior izquierda de la svg.

Había adivinado que si el width era igual al height del gráfico, el texto dentro de él se centraría verticalmente. Ese no parece ser el caso -O- existe alguna propiedad de tipo mágico display:block que necesito establecer en SVG para que width funcione en el elemento <text>.

¿Cómo se debe hacer esto?

Sobre la base de las respuestas, fui con una ruta javascript y modificar la línea anterior a ser (altura/2) ...

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

Fuente

2012-08-27 T. Stone

Un atributo width tiene ningún efecto sobre < texto> en SVG 1.1. El texto estará centrado (debido a text-anchor = middle) alrededor de la posición x, y definida por los atributos x y y (su valor predeterminado es 0 si no los especifica). Después de eso, se aplica el atributo transform.

Fuente

2012-08-28 06:36:22

En otras palabras, tengo que configurar manualmente la transformación x, y para centrar verticalmente con javascript. Esperaba conseguir una solución pura de CSS que podría ser fluida con el tamaño de página. –

Usted puede hacer esto con CSS transformar. Agregue esto a su CSS (a través de http://css3please.com): ejemplo

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

Trabajar aquí - busque en la pestaña 'css': http://livecoding.io/3492918

Fuente

2012-08-27 22:27:18

En el ejemplo, la etiqueta del eje Y se gira pero no está centrada verticalmente, que es la parte que estaba buscando. –

Cómo centrar texto girado a 90º en SVG

Respuesta

Cuestiones relacionadas