javascript - 如何使用CSS旋转SVG文本

Question

我正在使用 c3.js 生成图表。问题是我无法更改文本元素在 xgrid 上的位置。我希望它们是水平的。但是每当我尝试使用旋转元素时，元素就会超出 svg 范围。我怎样才能将它们准确地放置在它们所在的位置，但使它们水平放置

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

这是我试过的 css 完整代码见 js fiddle

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

Answer 1

您可以通过添加以下 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