How to center 90º rotated text in SVG

Question

When working with D3, I want to have a Y axis label that is rotated -90º and centered on the Y axis. I thought it would be a piece of cake, and wrote the following:

// 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 this case is the height of the chart (the vertical area occupied by svg). The above code will display the <text> element in the lower left corner of the chart, and then center the text relative to that lower left point. width does not change, and instead of being centered, it runs through the bottom left corner of svg.

I guessed that if the width was equal to the height chart, then the text inside it would become vertically centered. This doesn't seem to be the case: -OR- there is some kind of magic property like display:block that I need to set in SVG so that width works on the <text> element.

How to do it?

---

Based on the answers, I went with a javascript route and modified the above line (height / 2) ...

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

Answer 1

Attribute

A width does not affect <text> in SVG 1.1. The text will be centered (due to text-anchor = middle) around the x, y position defined by the x and y attributes (by default they are 0 if you did not specify them). After that, the transform attribute is applied.

Answer 2

You can do this with CSS transform. Add this to your CSS (via http://css3please.com ):

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

A working example is here - see the "css" tab: http://livecoding.io/3492918