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

Question

我只使用一个SVG背景图像创建了一个左右导航按钮,并水平翻转以获得另一个方向.这适用于除Internet Explorer 9之外的所有支持CSS 2D转换的浏览器.基本上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);
}

我在Internet Explorer 10,Firefox,Chrome,Safari等中创建了一个正确的jsFiddle:

但实际上在IE9中看起来像这样:

我已经包含了一个大于号的符号来说明按钮应指向哪个方向.实际上你可以看到,IE9正确地将变换应用于文本,但是对于SVG背景图像则完全相反.

如果我将SVG背景图像更改为PNG,则一切都可以在IE9中正常工作,但请参阅此jsFiddle.

我无法找到任何相关信息.这似乎是一个错误,因为IE9应该正确支持CSS转换和SVG作为CSS背景.

Answer 1

我认为你需要使用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/