Menu
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:
JSFiddle with simpler example
789
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 )"
(e.g. scalling it to .76, translating it left 241, and down 110)
196
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
