Jak wyśrodkować tekst obrócony o 90º w SVG

Praca z D3, chcę mieć etykietę osi Y, która jest obrócona o 90º i wyśrodkowana na osi Y. Myślałem, że to będzie bułka z masłem, i napisał, co następuje:Jak wyśrodkować tekst obrócony o 90º w 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 w tym przypadku jest wysokość wykresu (obszar pionowej zajmowanej przez SVG). Powyższy kod spowoduje wyświetlenie elementu <text> na dole po lewej stronie wykresu, a następnie wyśrodkuj tekst względem lewego dolnego punktu. Zmienia się więc , a nie w środku, lecz spływa z dolnego lewego rogu ekranu SVG.

Zgadłem, że jeśli width był równy height wykresu, tekst w nim znajdowałby się w pionie. To nie wydaje się być -OR- istnieje pewna magiczna właściwość typu, którą muszę ustawić w SVG, aby width działał na elemencie <text>.

Jak należy to zrobić?

Bazując na odpowiedziach, poszedłem z javascript trasie i modyfikowane powyższą linię być (wysokość/2) ...

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

Źródło

2012-08-27 T. Stone

Atrybut width nie ma wpływu na < tekst> w SVG 1.1. Tekst zostanie wyśrodkowany (z powodu zakotwiczenia tekstu = środek) wokół pozycji x, y zdefiniowanej przez atrybuty x i y (domyślnie są to 0, jeśli ich nie określono). Następnie zostanie zastosowany atrybut transform.

Źródło

2012-08-28 06:36:22

Innymi słowy, muszę ręcznie ustawić transformację x, y, aby wyśrodkować w pionie za pomocą javascript. Miałem nadzieję, że uda mi się uciec czystym rozwiązaniem CSS, które może być płynne w rozmiarze strony. –

Można to zrobić z CSS przekształcić. Dodaj to do Twojego CSS (przez http://css3please.com): przykład

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

tu pracować - patrz w zakładce 'css': http://livecoding.io/3492918

Źródło

2012-08-27 22:27:18

Na powyższym przykładzie etykieta osi Y jest obrócona, ale nie jest wyśrodkowana w pionie, czyli część, której dotyczyłem. –

Jak wyśrodkować tekst obrócony o 90º w SVG

Odpowiedz

Powiązane problemy