CSSでSVGテキストを回転させる方法

Question

私はc3.jsを使ってグラフを作成しています。問題は、xgrid上のテキスト要素の位置を変更できないということです。私はそれらを水平にしたい。しかし、今まで私が回転を使用しようとすると、要素はsvgの外に出ます。どのように私は、彼らがいる場所を正確に、その後に置くが、それらの水平

JSのフィドルを行うことができます。ここ

http://jsfiddle.net/yrzxj3x2/7/は私はJS

.xLineLable text{ 
    font-size: 12px; 
} 
.c3-grid text { 
    fill: #000; 
    transform: rotate(0); 
    } 

Answer 1

あなたがテキストを回転させることができますをいじる参照の完全なコードを試してみましたCSSです横に次のCSSを追加してください。

.c3-grid text { 
    fill: #000; 
    transform:rotate(0deg) translate(266px, 0px); 
    } 

さらに行を追加する場合は、値を手動で増やす必要があります。

あなたはまた、のような位置を与えることができます。

x: { 
    lines: [ 
     {value: "2016-01-08", text: "Want to rorate this text in 180 degrees", 
     class: "xLineLable", position: "outer-middle"} 


    ] 

が

Working Fiddle

編集：あなたは、なぜあなたはYGRIDに追加していない水平線を望む場合

。

grid: { 
    y: { 
     lines: [ 
       {value: 50,text: "Want to rorate this text in 180 degrees", 
     class: "xLineLable", position: "middle"}, 

      ] 
    }, 

Fiddle

Answer 2

だからあなたのフィドル内のテキストは、それを180度回転させるように述べてい...

私はここにいることをやった：

transform: translate(90px, 230px) rotate(90deg) !important; 

私もそれが水平にあなたが望むように、読める場所に移動してください：

transform: translate(295px, 115px); 

必要に応じて、x座標とy座標を移動して元の位置に戻すことができます。位置を使ってグリッド要素のように見えます。そのコードがどのように見えるかわからない