CSS3 “transform” property works different in IE9
Question
I'm trying a few things here with SVG, CSS3 transform and in different browsers.
This is my HTML code:
<!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):
<?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. Pay attention to the highlighted arrow (arrow points UP by default), with the class .bg
Here is a screenshot from Chrome, the arrow is rotated 90 degrees and points RIGHT (the correct way to render this code):
and here is a screenshot from IE9, the arrow is rotated 180 degrees and points DOWN:
Can anyone please explain this?
EDIT:
3 answers
solution1
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. I'm running into this same problem myself.
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:
transform="matrix(.76 0 0 .76 241 110 )"
(eg scalling it to .76, translating it left 241, and down 110)
solution2
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.
The hack implements support for the standard CSS transform for for old versions of IE. So now you can add the following to your 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
solution3
-1
I tried this in a fiddle: 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.
Perhaps the source of your problems is different?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.