在 Internet Explorer 9 中使用 SVG 背景图像进行 CSS 2D 转换

Question

我只使用一个 SVG 背景图像创建了一个左右导航按钮，并水平翻转它以获得另一个方向。这适用于所有支持 CSS 2D transforms 的浏览器除了 Internet Explorer 9。CSS 基本上是这样的:

div.nav-left, div.nav-right {
    background-image: url('TriangleArrow-Right.svg');
}

div.nav-left {
        -webkit-transform: scaleX(-1);
            -ms-transform: scaleX(-1);
                transform: scaleX(-1);
}

我创建了一个 jsFiddle在 Internet Explorer 10、Firefox、Chrome、Safari 等中正确显示如下:

但在 IE9 中实际上是这样的:

我添加了一个大于号来说明按钮应该指向哪个方向。实际上，您可以看到，IE9 将转换正确地应用于文本，但对 SVG 背景图像却完全相反。

如果我将 SVG 背景图像更改为 PNG，那么在 IE9 中一切正常，但是，请参见 jsFiddle .

我找不到这方面的任何信息。这似乎是一个错误，因为 IE9 应该支持 CSS 转换和 SVGs as CSS background正确。

Answer 1

我认为您需要使用 special syntax for IE :

div.nav-left {
    -webkit-transform: scaleX(-1);
    /*-ms-transform: scaleX(-1);*/
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    transform: scaleX(-1);
    left: -50px;
}

http://jsfiddle.net/g2y86/1/

虽然看起来不是很清晰，也许有更好的方法。

编辑

对于翻转，试试这个(注意 -ms-filter 和 filter 行都是针对 IE 的):

div.nav-left {
    -webkit-transform: scaleX(-1);
    -ms-filter: fliph;
    filter: fliph;
    transform: scaleX(-1);
    left: -50px;
}

http://jsfiddle.net/2cPYR/