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

Posted 2023-03-06

【中文标题】在 Internet Explorer 9 中使用 SVG 背景图像进行 CSS 2D 转换

【英文标题】：CSS 2D transform with SVG background-image in Internet Explorer 9

【发布时间】：2012-10-20 18:36:07

【问题描述】：

我只使用一个 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。

【参考方案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/

【讨论】：

不幸的是，我的图像不可旋转。它必须保持直立，并且只能水平翻转而不能垂直翻转（旋转 180° 可以同时进行）。

正如你所说，它看起来不是很清晰，而且 IE 过滤器不支持 alpha 透明度（即使 IE9 在 SVG 和 PNG 上正确支持它，但在使用过滤器时它会中断）。你仍然得到我的支持，但这对我来说不是解决方案......

@samy-delux：也许使用两个不同的图像更简单，语义上更正确（如果可能的话）。

是的，这就是我正在做的事情，将 IE9 切换为使用我们为 IE8 准备的 PNG。

【参考方案2】：

根据我的尝试，scaleX-property 确实不适用于 svg 背景图像上的负数。如果您对尝试转换的 div 应用不同颜色的边框，您可以看到，它实际上已正确转换，但背景图像不适应其容器。

如果你只是想解决眼前的问题，你可以使用-ms-transform: rotate(180deg);，svg 似乎知道它应该在这里做什么。

【讨论】：

这不起作用。我已经尝试过这种方法，请参见此处：jsfiddle.net/hj7Tg/17 或者您能否提供一个有效的 jsFiddle？

对，对不起..我忘记了我将 div 更改为静态元素而不是定位元素...也许它无论如何都有帮助 jsfiddle.net/7evDa

但是一旦我重新添加绝对定位，它就会再次中断：jsfiddle.net/7evDa/3

【参考方案3】：

我用filter: FlipV;来容纳ie9

-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
filter: FlipV; // flip for ie9