CSS transform on SVG Elements IE9+

问题

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?

回答1:

IE11 supports the transform attribute in SVG even though it doesn't recognize the CSS style. See https://connect.microsoft.com/IE/feedback/details/811744/ie11-bug-with-implementation-of-css-transforms-in-svg.

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);

Working Fiddle

回答2:

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

来源：https://stackoverflow.com/questions/21298338/css-transform-on-svg-elements-ie9

标签

css3

internet-explorer

svg

css-transforms