如何使用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文本

回答

相關問題