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?
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.
You can also rotate the path of the SVG directly via a transform in the itself.
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) .
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>
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
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