The main thing that works differently between HTML elements and SVG elements is the local coordinate system of the element. This means we either need another way to check for IE or we use the transform attributes across the board (which feels like less work overall). Firefox seems to behave correctly in this case.Īlso problematic is the fact that JavaScript feature detection fails in IE (reading the CSS transform value via JS will return the matrix equivalent of the transform we have set in our stylesheet). For example, we cannot use % values for translate functions (though % values wouldn’t work for CSS transforms in Firefox either, whether we’re talking about transform-origin values or translate() parameters) and all rotate or skew angle values are in degrees, we cannot use the other units we have available in CSS.įirefox now supports % values for transform-origin, but they are relative to the SVG, not to the element we’ve set transform-origin on like it is the case in Chrome. However, if we use the transform attribute approach, all parameters for transform functions are numbers, meaning we cannot control and combine units anymore. Update: Edge supports CSS transforms on SVG elements starting with EdgeHTML 17 released on the 30th of April 2018. Of course, there’s the option of using the SVG transform attributes for IE if we only need to apply 2D transforms on our elements. However, a lot of things don’t work the same way on SVG elements as they do on HTML elements.įor starters, CSS transforms on SVG elements don’t work in IE. Just like HTML elements, SVG elements can be manipulated using transform functions. In this case, that’s extra-useful as there are several ways to handle SVG transforms and they require a bit of mathematical thinking, especially converting one type to another for the best cross browser support. Ana always does a great job digging into the math behind what we can do graphically on the web. The following is a guest post by Ana Tudor.

Instal the new version for ios Boxy SVG