Question

我正在尝试使用SVG，CSS3 transform以及不同的浏览器这是我的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和其他（普通）浏览器之间是不同的。注意突出显示的箭头（默认情况下箭头指向UP），类.bg

以下是Chrome的屏幕截图，箭头旋转90度并指向右侧（正确呈现此代码的方式）：
chrom-result

这是IE9的截图，箭头旋转180度，点向下：
ie9-result

有人可以解释一下吗？

编辑：

JSFiddle with simpler example

Answer 1

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

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

<强>更新

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

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

（例如，将其缩小为.76，将其翻译为241，然后将其翻译为110）

Answer 2

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

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

-sand-transform: rotate(10deg);

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

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

IE 9在使用deg

时有时会出现这些问题

Answer 3

我试着用这个小提琴：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。

也许问题的根源不同？

enter image description here

CSS3“转换”属性在IE9中的工作方式不同

3 个答案: