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

Question

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

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

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

score 0 · Accepted Answer

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

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

1 回答 1