Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 589
zanona Avatar asked Jan 23 '14 02:01

zanona


People also ask

Can I use transform SVG?

Just like HTML elements, SVG elements can be manipulated using transform functions. However, a lot of things don't work the same way on SVG elements as they do on HTML elements. For starters, CSS transforms on SVG elements don't work in IE.

Can I rotate SVG?

You can also rotate the path of the SVG directly via a transform in the itself.

Which css3 transform property is used to rotate SVG objects in html5?

The rotate(<a> [<x> <y>]) transform function specifies a rotation by a degrees about a given point. If optional parameters x and y are not supplied, the rotation is about the origin of the current user coordinate system. If optional parameters x and y are supplied, the rotation is about the point (x, y) .


2 Answers

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>
like image 143
Rick Hitchcock Avatar answered Sep 30 '22 12:09

Rick Hitchcock


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

like image 34
sam Avatar answered Sep 30 '22 13:09

sam