I am having issue in IE9, IE10 and IOS 8 when used transform: rotate(180deg)
, the icon is disappearing.
I tried using -ms
vendor prefix but no use.
JSFIDDLE
Test on Modern.ie
.down-arrow {
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-ms-transform-origin: center;
transform-origin: center;
width: 16px;
height: 16px;
}
svg {
max-height: 100%;
max-width: 100%;
vertical-align: top;
}
<div style="display:none">
<svg>
<symbol id="down-arrow">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.527,6.854L0.202,1.042c-0.269-0.288-0.269-0.754,0-1.042h8.621
c0.269,0.288,0.269,0.755,0,1.042" />
</symbol>
</svg>
</div>
<div class="down-arrow">
<svg>
<use xlink:href="#down-arrow"></use>
</svg>
</div>
And I think this is not only with SVG but also when used html elements. Check this example fiddle.
.down-arrow {
width: 0;
height: 0;
border-width: 12px;
border-color: #000 transparent transparent transparent;
border-style: solid;
-ms-transform: rotate(180deg);
transform: rotate(180deg);
-ms-transform-origin: center;
transform-origin: center;
}
<div class="down-arrow"></div>
you can use SVG for Everybody,
I have created test pen here: http://codepen.io/mkdizajn/pen/PbyZoM also I have tested on WIN 7 and IE9 and image is here:
https://app.crossbrowsertesting.com/public/ic7b2b4fec0f754a/livetests/6573248/snapshots/z1482ad843f3e76a100f
The only thing that I did was that I included external JS file:
https://cdnjs.cloudflare.com/ajax/libs/svg4everybody/2.1.3/svg4everybody.min.js
and called
svg4everybody();
hope that helps
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