Cách căn giữa văn bản xoay 90º trong SVG

Question

Làm việc với D3, tôi muốn có nhãn trục Y được xoay -90º và căn giữa trên trục Y. Tôi nghĩ đây sẽ là một miếng bánh, và viết những điều sau đây:

// 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 trong trường hợp này là chiều cao của bảng xếp hạng (khu vực dọc chiếm đóng bởi svg). Đoạn mã trên sẽ hiển thị phần tử <text> ở phía dưới cùng bên trái của biểu đồ, sau đó căn giữa văn bản so với điểm dưới cùng bên trái. Các width hiện không thay đổi và do đó thay vì được làm trung tâm nó chạy ra khỏi góc dưới cùng bên trái của svg.

Tôi đã đoán rằng nếu width bằng với height của biểu đồ, thì văn bản trong đó sẽ được căn giữa theo chiều dọc. Điều đó dường như không phải là trường hợp -HOẶC- có một số thuộc tính loại display:block ma thuật mà tôi cần đặt trong SVG để width hoạt động trên phần tử <text>.

Việc này nên được thực hiện như thế nào?

---

Dựa trên những phản hồi, tôi đi cùng một con đường javascript và sửa đổi dòng trên để được (chiều cao/2) ...

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

Answer 1

Thuộc tính width không ảnh hưởng đến < text> trong SVG 1.1. Văn bản sẽ được căn giữa (do neo văn bản = giữa) xung quanh vị trí x, y được xác định bởi thuộc tính x và y (chúng mặc định là 0 nếu bạn không chỉ định chúng). Sau đó, thuộc tính transform được áp dụng.

Answer 2

Bạn có thể làm điều này với CSS transform. Thêm phần này vào CSS của bạn (thông qua http://css3please.com): ví dụ

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

Làm việc ở đây - nhìn vào tab 'css': http://livecoding.io/3492918