5

我在这里用 SVG、CSS3transform和不同的浏览器尝试了一些东西。
这是我的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>
    <style type="text/css">
    .svg-holder {
        text-align: center;
        padding: 50px;
    }
    .img1 {
        transform: rotate(180deg); /* IE10 and Mozilla */
        -ms-transform: rotate(180deg); /* IE 9 */
        -webkit-transform: rotate(180deg); /* Chrome and Safari */
    }
    .img2 {
        transform: scale(3,3); /* IE10 and Mozilla */
        -ms-transform: scale(3,3); /* IE 9 */
        -webkit-transform: scale(3,3); /* Chrome and Safari */
    }
    .bg {
        background-color: yellow;
        background-image: url(arrow.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        width: 100px;
        height: 100px;
        margin: 0 auto;
        transform: rotate(90deg);
        -ms-transform: rotate(90deg); /* IE 9 */
        -webkit-transform: rotate(90deg);
    }
    </style>
</head>
<body>
    <div class="svg-holder img1">
        <img src="arrow.svg" class="red-arrow">
    </div>
    <div class="svg-holder img2">
        <img src="arrow.svg">
    </div>

    <div class="svg-holder bg">
    </div>
</body>
</html>

“arrow.svg”文件内容是（但您可以使用任何您想要的 .svg）：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    width="35.551px" height="35.551px" viewBox="0 0 35.551 35.551" enable-background="new 0 0 35.551 35.551" xml:space="preserve">
<polygon fill="#404040" points="17.775,0 0,17.775 11.109,17.775 11.109,35.551 24.441,35.551 24.441,17.775 35.551,17.775 "/>
</svg>

但是，上述代码的呈现方式在 IE9 和其他（普通）浏览器之间是不同的。注意突出显示的箭头（默认情况下箭头指向向上），与类.bg

这是 Chrome 的屏幕截图，箭头旋转 90 度并指向 RIGHT（呈现此代码的正确方法）：
铬结果

这是来自 IE9 的屏幕截图，箭头旋转 180 度并指向 DOWN：
ie9-结果

谁能解释一下？

编辑：

带有更简单示例的 JSFiddle

4

3 回答 3

2

根据 Microsoft 的文档，看起来 CSS 转换属性不能在 SVG 上的 IE 浏览器中使用。我自己也遇到了同样的问题。

http://msdn.microsoft.com/en-us/library/ie/hh801971(v=vs.85).aspx

更新

事实上，为了完全跨浏览器应用转换，我必须在 SVG 标签中的元素上使用实际的转换属性，例如：

transform="matrix(.76 0 0 .76 241 110 )"

（例如，将其缩放至 0.76，将其向左平移 241，向下平移 110）

于 2014-05-05T18:03:39.777 回答
0

我最近发现了一个名为 CSS Sandpaper 的 hack，它与问题相关，可能会使事情变得更容易。

hack 实现了对旧版本 IE 的标准 CSS 转换的支持。所以现在您可以将以下内容添加到您的 CSS 中：

-sand-transform: rotate(10deg);

否则，您也可以尝试使用以下代码来执行您需要的操作：

-ms-transform: matrix(0.000,1,-1,0.000,0,0);

IE 9 在使用 deg 时有时会出现这些问题

于 2013-11-16T09:30:09.853 回答
-1

我在小提琴中试过这个：http: //jsfiddle.net/c6brV/

.logo {
 background-image: url(http://upload.wikimedia.org/wikipedia/commons/a/aa/Aiga_uparrow.svg);
 background-repeat: no-repeat;
 background-size: contain;
 width: 100px;
 height: 100px;
 margin: 0 auto;
 transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg);

}

我使用了不同的维基媒体箭头。它在我尝试过的所有 IE 版本中都指向正确：11、10 和 9。

也许您的问题的根源不同？

在此处输入图像描述

于 2013-11-16T09:58:40.753 回答