如何使用 css 旋转 SVG 文本答案

【问题标题】：How to rotate SVG text with css如何使用 css 旋转 SVG 文本
【发布时间】：2016-02-19 15:09:57
【问题描述】：

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

这是我为完整代码尝试过的 css，请参阅 js fiddle

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

【问题讨论】：

或许使用 transform-origin
SVG 元素本身的transform 属性似乎会覆盖您分配给它的任何CSS。不幸的是，I don't see any way to rotate the text using c3.js。无论如何，将水平文本分配给垂直线是模棱两可的，我不会推荐它。
您可能需要重置显示以进行转换，但 FF jsfiddle.net/yrzxj3x2/19 中的行为很奇怪
@GCyrillus 您只是习惯了 Chrome 的奇怪（并且根据规范不正确）行为；-)

标签： javascript css svg c3.js

【解决方案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

【讨论】：

但是当我在图表中添加更多行时，文本也不会显示...jsfiddle.net/yrzxj3x2/26

【解决方案2】：

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

我在这里做了：

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

我还按照您的要求将其水平放置，并将其移至可读的位置：

 transform: translate(295px, 115px);

如果需要，您可以移动 x 和 y 坐标以将其放得更高。它看起来像使用位置的网格元素。不知道那段代码是什么样子的。

【讨论】：

这是烦人的情况之一，您的 css 中需要 4 条类似但浏览器特定的行，此处有详细信息 css-tricks.com/examples/ShapesOfCSS 基本形式是 svg{变换：旋转（45度）； }
如果你在谈论浏览器前缀，你可以使用 auto-prefixer sublime 插件为你添加这些行，我相信还有很多其他工具可以为你自动完成。