23

Having a SVG Path:

<path class='st8' d='M73.4,11.3c-6.3,0-6.4,3.6-6.4,3.6v18c0,0,0.6,3.3,6.4,3.3c5.8,0,6.6-3.3,6.6-3.3v-18 C80,14.9,79.7,11.3,73.4,11.3z M75,31.3c0,0-0.3,1.2-1.6,1.2c-1.3,0-1.4-1.2-1.4-1.2V16.6c0,0,0.3-1.3,1.5-1.3s1.5,1.3,1.5,1.3V31.3 z'/>

I have tried to transform it from CSS instead of declaring the transform attribute from the element tag.

This process works fine from webkit and firefox, however when testing on IE9 or 10 nothing happens.

<svg>
    <style>
        .st8 {
            -webkit-transform: rotate(45deg); /* works on chrome and Safari */
            -moz-transform: rotate(45deg); /* works on firefox */
            -ms-transform: rotate(45deg); /* doesn't work on IE */
            transform: rotate(45deg);
        }
    <style>
    <path class='st8' d='M73.4,11.3c-6.3,0-6.4,3.6-6.4,3.6v18c0,0,0.6,3.3,6.4,3.3c5.8,0,6.6-3.3,6.6-3.3v-18 C80,14.9,79.7,11.3,73.4,11.3z M75,31.3c0,0-0.3,1.2-1.6,1.2c-1.3,0-1.4-1.2-1.4-1.2V16.6c0,0,0.3-1.3,1.5-1.3s1.5,1.3,1.5,1.3V31.3 z'/>
</svg>

I have tried to search the web for any place mentioning that css transform indeed doesn't work on IE, however I couldn't find it. Hence my question, is it indeed not possible to use css transform on IE? Is there any workaround besides having to strictly use the transform attribute in the element tag?

zanona
  • 12,345
  • 25
  • 86
  • 141

2 Answers2

22

IE11 supports the transform attribute in SVG even though it doesn't recognize the CSS style.

Fortunately, you can simply set the attribute to match the style using JavaScript:

var g = document.querySelector('.st8'),
    transform = getComputedStyle(g).getPropertyValue('transform');
    
g.setAttribute('transform', transform);
.st8 {
    -ms-transform: rotate(45deg); /* doesn't work on IE */
    transform: rotate(45deg);
}
<svg>
  <path class='st8' d='M73.4,11.3c-6.3,0-6.4,3.6-6.4,3.6v18c0,0,0.6,3.3,6.4,3.3c5.8,0,6.6-3.3,6.6-3.3v-18 C80,14.9,79.7,11.3,73.4,11.3z M75,31.3c0,0-0.3,1.2-1.6,1.2c-1.3,0-1.4-1.2-1.4-1.2V16.6c0,0,0.3-1.3,1.5-1.3s1.5,1.3,1.5,1.3V31.3 z'/>
</svg>
Simon Arnold
  • 15,849
  • 7
  • 67
  • 85
Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
  • 1
    Hmm, it works in my IE9 emulator, but I don't have an IE9 computer to test it with. Thanks for letting me know. – Rick Hitchcock Mar 16 '15 at 17:19
  • No problems, I tested it on VirtualBox with iso from www.modern.ie, its the safest option i think. Also I found out you just cant tranform svg images in IE9, so I used a png. – vaskort Mar 17 '15 at 09:42
17

Although IE9+ support CSS3 transforms, they don't support them on SVG and to the best on my knowledge it can't be done in CSS.

source: caniuse under known issues for CSS3 Transforms http://caniuse.com/#feat=transforms2d

sam
  • 243
  • 3
  • 8