如何用css旋转SVG文本

I am using c3.js to produce a chart. the problem is that the I cannot change the position of text elements on xgrid. I would like them to be horizontal. But when ever I try to use rotate the elements go outside of svg. How can I place then exactly where they are but make them horizontal

我正在使用c3.js来生成图表。问题是我无法改变xgrid上文本元素的位置。我希望他们是横向的。但是，当我尝试使用旋转时，元素会转到svg之外。我怎样才能准确地放置它们的位置，但要使它们水平

js fiddle: http://jsfiddle.net/yrzxj3x2/7/

js小提琴：http：//jsfiddle.net/yrzxj3x2/7/

here is the css that I have tried for complete code see js fiddle

这是我试过的完整代码的CSS，请参阅js小提琴

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

2 个解决方案

#1

You can rotate text in horizontal by add following css.

您可以通过添加以下css来水平旋转文本。

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

If you want to add more lines then you should increase value manually.

如果要添加更多行，则应手动增加值。

You can also give position like:

你也可以给位置：

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


    ]

Working Fiddle

工作小提琴

Edit:

编辑：

If you want horizontal line then why you don't add to ygrid.

如果你想要水平线，那你为什么不添加到ygrid。

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

            ]
     },

Fiddle

小提琴

#2

So the text in your fiddle says to rotate it 180 degrees...

所以小提琴中的文字说要旋转180度......

I did that here:

我这样做了：

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

I also made it horizontal like you wanted and moved it down to a readable place:

我也像你想要的那样横向移动并将其移动到一个可读的地方：

 transform: translate(295px, 115px);

You can move the x and y coordinates to put it back up higher if you want. It looks like the grid elements using positions. Not sure what that code looks like.

如果需要，您可以移动x和y坐标以将其重新设置为更高。它看起来像使用位置的网格元素。不确定代码是什么样的。

#1