CSS 翻译在 SVG g 上的 IE11 中不起作用

Posted 2023-03-06

【中文标题】CSS 翻译在 SVG g 上的 IE11 中不起作用

【英文标题】：CSS translate not working in IE11 on SVG g

【发布时间】：2014-05-27 15:30:08

【问题描述】：

我想使用 <g> 标签移动一组 svg 元素，但它在 IE 中不起作用，即使是最新版本，虽然它适用于所有其他浏览器。

我是否需要使用其他方式在 svg 中移动一组元素？

svg 
  width: 20px;
  height: 20px;


g 
  transform: translate(10px, 0);
  -ms-transform: translate(10px, 0);

<svg viewbox="0 0 20 20">
    <g>
        <circle cx=10 cy=10 r=10 />
    </g>
</svg>

【问题讨论】：

caniuse.com/#feat=transforms3d 说它部分支持rd..

对不起，柯蒂斯，没有机会让这个工作（截至 2015 年 2 月 20 日） - 请参阅此处的官方 ie 页面：connect.microsoft.com/IE/feedback/details/811744/…

【参考方案1】：

IE11 支持 SVG 中的 transform 属性，即使它不能识别 CSS 样式。

幸运的是，您可以使用 javascript 简单地设置属性以匹配样式：

var g = document.querySelector('g'),
    transform = getComputedStyle(g).getPropertyValue('transform');
    
g.setAttribute('transform', transform);

svg 
  width: 20px;
  height: 20px;


g 
  transform: translate(10px, 0);
  -ms-transform: translate(10px, 0);

<svg viewbox="0 0 20 20">
  <g>
<circle cx=10 cy=10 r=10 />
  </g>
</svg>

【讨论】：

哦，很好，实际上将 translate 转换为矩阵，IE 喜欢它，谢谢

还有什么办法吗？

我不知道。

重要提示 - 提供的代码 sn-p 将从元素中获取您的 css STYLE 并将其转换为转换 matrix() 表示法。

【参考方案2】：

如果有人仍然需要 jQuery，这对我有用：

jQuery("g").each(function()
        transform = jQuery(this).css('transform');
        console.log(transform);
        jQuery(this).attr('transform',transform);
    );

【讨论】：

非常适合 IE11。

【参考方案3】：

使用变换属性

transform="translate(10, 0)"

在 IE 上就像一个魅力。

如果你想即时更改它，请使用 JS

【参考方案4】：

如果有人仍然需要 angularjs，这对我有用：

.directive('ieTransform', function ($window) 
    return 
        restrict: 'A',
        link: function (scope, element, attrs) 
            var elementStyleMap = $window.getComputedStyle(element[0], null);
            var transform = elementStyleMap.getPropertyValue('transform');

            element[0].setAttribute('transform', transform);
        
    ;
)