css - 在 SVG 中旋转 IE 中的文本

Question

我正在使用 chartist 框架创建一些图表，并且我想旋转 x 轴标签。

不幸的是，我的解决方案在 ie11 中不起作用。请看下面的小提琴。

https://jsbin.com/zusofijave/1/edit?html,css,js,输出

欢迎任何想法

html {
  box-sizing: border-box;
  font-family: Roboto, sans-serif;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.ct-label.ct-label.ct-horizontal {
  position: fixed;
  justify-content: flex-end;
  -webkit-justify-content: flex-start;
  text-align: right;
  transform-origin: 100% 0;
  transform: translate(-100%) rotate(-45deg);
  display: inline-block;
  -ms-transform: rotate(270deg) translate(0,0);
  -ms-transform-origin: 0 0;
}

#chart svg {
  overflow: visible;
}

.rotate{
  -ms-transform: rotate(270deg) translate(0,0);
  -ms-transform-origin: 0 0;
}