CSS:转换旋转无法使用span内部SVG标记

CSS : Transform rotate not working with span inner SVG tag

本文关键字：span 内部 SVG 标记 转换 旋转 CSS      更新时间：2023-09-26

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

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

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

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

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

工作示例：https://jsfiddle.net/LukaszWiktor/15zyq0q1/

相关文章：