如何使用css旋转SVG文本

我正在使用c3.js生成图表。问题在于我无法更改xgrid上文本元素的位置。我希望他们是水平的。但是，当我尝试使用旋转的元素超出svg。我怎样才能把那么究竟他们在哪里，但让他们水平如何使用css旋转SVG文本

这里是我已经尝试了完整的代码中看到JS拨弄

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

来源

2016-02-19 Imo

使用transform-origin也许 –

SVG元素本身的'transform'属性看起来会覆盖您分配给它的任何CSS。不幸的是，[我没有看到使用c3.js旋转文本的任何方法（http://c3js.org/reference.html#grid-x-lines）。无论如何，将水平文本分配到垂直线是不明确的，我不会推荐它。 – Blazemonger

你可能需要重置显示，因此它需要转换，但在FF中奇怪的行为http://jsfiddle.net/yrzxj3x2/19/ –

您可以旋转文本的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

来源

2016-02-23 03:58:43 ketan

但后来当我添加更多的行到图表有文字不显示以及... http://jsfiddle.net/yrzxj3x2/26/ – Imo

检查我的编辑。 – ketan

所以在你的提琴文中说，以旋转180度......

我这样做，在这里：

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

我也使得水平像你想要的，并将其移动到可读的位置：

transform: translate(295px, 115px);

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

来源

2016-02-29 05:23:21 D3TXER

这是那些**烦人的**案例之一，您需要4个类似的，但在您的CSS浏览器特定的行，细节在这里https://css-tricks.com/examples/ShapesOfCSS/基本形式是** svg {转换：旋转（45度）; } ** –

如果你正在谈论浏览器前缀，你可以使用auto-prefixer sublime插件来为你添加这些行，并确保有很多其他工具可以为你自动完成。 – D3TXER

如何使用css旋转SVG文本

回答

相关问题