CSS3“转换”属性在IE9中的工作方式不同
[英]CSS3 “transform” property works different in IE9
问题描述
I'm trying a few things here with SVG, CSS3 transform and in different browsers. 
我正在尝试使用SVG，CSS3 transform和不同的浏览器。
This is my HTML code: 这是我的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>
The "arrow.svg" file content is (but you may use what ever .svg you'd like): “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>
However, the way the above code is being rendered is different between IE9 and the rest of the (normal) browsers. 但是，上面代码的呈现方式在IE9和其他（普通）浏览器之间是不同的。 Pay attention to the highlighted arrow (arrow points UP by default), with the class .bg 使用类.bg注意突出显示的箭头（默认情况下箭头指向UP）
Here is a screenshot from Chrome, the arrow is rotated 90 degrees and points RIGHT (the correct way to render this code): 以下是Chrome的屏幕截图，箭头旋转90度并指向RIGHT（渲染此代码的正确方法）：
and here is a screenshot from IE9, the arrow is rotated 180 degrees and points DOWN: 这是IE9的截图，箭头旋转180度，点向下：
Can anyone please explain this? 有人可以解释一下吗？
EDIT: 编辑：
3 个解决方案
解决方案1
2 2014-05-05 18:03:39
Based on Microsoft's documentation, it looks like the CSS transform attribute can't be used in IE browsers on SVGs. 根据Microsoft的文档，看起来CSS转换属性不能在SVG上的IE浏览器中使用。 I'm running into this same problem myself. 我自己也遇到了同样的问题。
http://msdn.microsoft.com/en-us/library/ie/hh801971(v=vs.85).aspx http://msdn.microsoft.com/en-us/library/ie/hh801971(v=vs.85).aspx
Update 更新
Indeed, in order to apply transformations fully cross-browser, I had to use the actual transform attribute on an element in the SVG tag, like: 实际上，为了完全跨浏览器应用转换，我不得不在SVG标记中的元素上使用实际的transform属性，如：
transform="matrix(.76 0 0 .76 241 110 )"
(eg scalling it to .76, translating it left 241, and down 110) （例如，将其缩小为.76，将其翻译为241，然后将其翻译为110）
解决方案2
0 2013-11-16 09:30:09
I recently found out about a hack called CSS Sandpaper which is relevant to the question and may make things easier. 我最近发现了一个名为CSS Sandpaper的黑客，它与问题相关，可能会让事情变得更容易。
The hack implements support for the standard CSS transform for for old versions of IE. 对于旧版本的IE，hack实现了对标准CSS转换的支持。 So now you can add the following to your CSS: 所以现在你可以在CSS中添加以下内容：
-sand-transform: rotate(10deg);
Otherwise, you may also try using the following code to do what you need: 否则，您也可以尝试使用以下代码来执行您需要的操作：
-ms-transform: matrix(0.000,1,-1,0.000,0,0);
IE 9 sometimes has these issues while using deg IE 9在使用deg时有时会出现这些问题
解决方案3
-1
I tried this in a fiddle: http://jsfiddle.net/c6brV/ 我试着用这个小提琴： 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);
} }
I've used a different Wikimedia arrow. 我使用了不同的维基媒体箭头。 It points right in all IE versions I tried: 11, 10 and 9. 它指向我尝试的所有IE版本：11,10和9。
Perhaps the source of your problems is different? 也许你的问题的根源是不同的？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.