CSS变换SVG元素IE9 + [英] CSS transform on SVG Elements IE9+

问题描述

拥有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'/>

我试图从CSS转换而不是声明 transform

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

这个过程在webkit和firefox中工作正常，但是当在IE9或10上测试时不会发生。

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>

我试图在网上搜索任何提到css变换确实不工作的地方，但我找不到它。因此我的问题，是不是真的不可能在IE上使用CSS转换？除了必须严格使用元素标签中的 transform 属性，是否有任何解决方法？

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?

推荐答案

IE11支持SVG中的transform属性，即使它不能识别CSS样式。请参见 https://connect.microsoft .com / IE / feedback / details / 811744 / ie11-bug-with-implementation-of-css-transforms-in-svg 。

您可以使用JavaScript简单地设置属性以匹配样式：

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

这篇关于CSS变换SVG元素IE9 +的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！