如何在IE中将动画变换应用于这些SVG元素？

Question

我有一个<a>标签，其中包含一个SVG，当点击时，它会切换一个＆＃34;打开＆＃34; <header>上的课程。取决于＆＃34;打开＆＃34; class存在，不同的变换应用于SVG的子元素。

除了IE 9-11之外，这一切在我测试过的所有地方都能正常工作。

这些是我尝试使用的SCSS转换：

svg {
    .cross1 {
        -ms-transform: rotate(0);
            transform: rotate(0);
        -ms-transform-origin: 8px 1px 0;
            transform-origin: 8px 1px 0;
        -webkit-transition: transform 0.25s, cubic-bezier(0.165, 0.840, 0.440, 1.000);
           -moz-transition: transform 0.25s, cubic-bezier(0.165, 0.840, 0.440, 1.000);
             -o-transition: transform 0.25s, cubic-bezier(0.165, 0.840, 0.440, 1.000);
                transition: transform 0.25s, cubic-bezier(0.165, 0.840, 0.440, 1.000);
    }
}

.open svg {
    .cross1 {
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
        -ms-transform-origin: 8px 1px 0;
            transform-origin: 8px 1px 0;
        -webkit-transition: transform 0.25s, cubic-bezier(0.165, 0.840, 0.440, 1.000);
           -moz-transition: transform 0.25s, cubic-bezier(0.165, 0.840, 0.440, 1.000);
             -o-transition: transform 0.25s, cubic-bezier(0.165, 0.840, 0.440, 1.000);
                transition: transform 0.25s, cubic-bezier(0.165, 0.840, 0.440, 1.000);
    }
}

看到完整的小提琴here。

有人可以告诉我如何让这些工作在IE9 +上吗？