CSS：变换旋转不适用于跨度内部 SVG 标记答案

【问题标题】：CSS : Transform rotate not working with span inner SVG tagCSS：变换旋转不适用于跨度内部 SVG 标记
【发布时间】：2016-08-05 07:37:34
【问题描述】：

我使用 Chartis.js 创建了一个图表。我喜欢它，因为它反应灵敏。但是水平标签看起来没有响应，我尝试让 X-label 旋转 90 度以保留大量空间，但它不起作用。

.ct-label.ct-horizontal.ct-end {
    transform:rotate(90deg) !important;
    -webkit-transform:rotate(90deg) !important;
}

请帮帮我，你可以在这里看到我的小提琴https://jsfiddle.net/740yajof/

【问题讨论】：

【解决方案1】：

我不知道为什么，但是当您将图表脚本和样式移动到外部资源时，它工作得很好。不需要!important 或供应商前缀-webkit-*。我刚刚添加了transform-origin: left 以将旋转锚点向左移动（默认情况下它在中间）。

.ct-label.ct-horizontal.ct-end {
    transform:rotate(90deg);
    transform-origin: 0;
}

【讨论】：