CSS: преобразование не работает с внутренним тегом SVG span

Question

Я создал диаграмму с использованием Chartis.js. Мне это нравилось, потому что он был отзывчивым. Но горизонтальная метка выглядела нечувствительной, я попытался сделать X-метку вращением на 90 градусов, чтобы сохранить много места, но она не работает.

Пожалуйста, помогите мне, вы можете увидеть мою скрипку здесь https://jsfiddle.net/740yajof/

Answer 1

Я не знаю, почему, но это работает очень хорошо, когда вы перемещаете чартистских скрипты и стили к внешним ресурсам. Нет необходимости в !important или префиксе поставщика -webkit-*. Я только что добавил transform-origin: left, чтобы переместить якорь вращения влево (по умолчанию он посередине).

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

Рабочий пример: https://jsfiddle.net/LukaszWiktor/15zyq0q1/