SVG转换属性在IE Edge中不起作用

安华

下面的JSFiddle是SVG绘图,其中两个棕色矩形<rect>彼此隔开,并且两个组<g>都有一个类class="group",这些具有应用变换(旋转和平移)的类。

JSFiddle

参考Caniuse.com,它为主要浏览器提供了大部分支持,它表明IE9 +支持SVG转换属性,并且在“知道问题”中

IE 10及以下版本不支持SVG元素上的CSS转换(尽管SVG转换属性确实起作用)。

问题

尽管我的唯一消息来源是该网站,但我是否知道为什么现在(2015年12月IE Edge不支持转换属性

问题2

是否有其他替代方法可以应用IE(Edge),Chrome和Firefox支持的CSS转换?

笔记

JSFiddle在Chrome和Firefox上测试成功。只有IE在这两个版本(5、7、8、9、10,Edge)中均未通过测试。

代码骑手

通过CSS,我认为IE或Edge不支持它。

该属性有效,我已经测试过了,因此我认为我们必须更改实现方法。

<g class="group" transform ="translate(100, 100) rotate(90)">

手动执行,或者如果<g class="group">已经创建,则使用javascript或jquery将此属性附加到<g class="group">

片段

<svg width="500px" height="500px">
  <g class="group" transform ="translate(100, 100) rotate(90)">
    <rect width="100px" height="10px" fill="brown"></rect>
    <rect x="50px" y="50px" width="100px" height="10px" fill="brown"></rect>
  </g> 
</svg>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

线性渐变中的calc在IE / Edge中不起作用

来自分类Dev

输入范围在ie或edge中不起作用

来自分类Dev

Javascript在Firefox和IE / Edge中不起作用

来自分类Dev

jQuery ajax加载XML,在IE或Edge中不起作用

来自分类Dev

CSS动画在IE和Edge中不起作用

来自分类Dev

字体在 Microsoft Edge 或 IE 中不起作用

来自分类Dev

转换比例(1)在Microsoft Edge中不起作用

来自分类Dev

SVG 徽标投影属性在 IE 中不起作用

来自分类Dev

CSS在Chrome / Firefox中不起作用(渲染)但在IE10 / Edge中起作用

来自分类Dev

Microsoft Edge / IE SVG变换比例动画不起作用

来自分类Dev

使用flexbox时,溢出属性在IE Edge和Firefox中不起作用

来自分类Dev

使用flexbox时,溢出属性在IE Edge和Firefox中不起作用

来自分类Dev

在Microsoft Edge中的SVG内部转换元素不起作用

来自分类Dev

IE / EDGE底边空白不起作用

来自分类Dev

某些属性在IE中不起作用

来自分类Dev

数据属性在IE中不起作用

来自分类Dev

SVG scale()在Edge(Not Edge Chronium)上不起作用

来自分类Dev

localstorage 中的 JSON 数组在 IE 和 Edge 中不起作用

来自分类Dev

使用Ajax渲染ViewComponent在Edge / IE11中不起作用

来自分类Dev

该Javascript在IE或Edge中不起作用。任何人有任何想法吗?

来自分类Dev

具有表格和绝对定位功能的Flexbox在IE 10、11或Edge中不起作用

来自分类Dev

Edge和IE11中的CSS过渡不起作用

来自分类Dev

伪元素前后的 CSS 在 Edge 和 IE 11 中不起作用

来自分类Dev

SVG图像标签在Firefox或IE中不起作用

来自分类Dev

SVG线动画在IE中不起作用

来自分类Dev

jQuery CSS转换在IE8中不起作用?

来自分类Dev

样式属性上的jQuery选择在IE中不起作用

来自分类Dev

溢出属性在IE 11中不起作用

来自分类Dev

下载标签上的属性在IE中不起作用

Related 相关文章

  1. 1

    线性渐变中的calc在IE / Edge中不起作用

  2. 2

    输入范围在ie或edge中不起作用

  3. 3

    Javascript在Firefox和IE / Edge中不起作用

  4. 4

    jQuery ajax加载XML,在IE或Edge中不起作用

  5. 5

    CSS动画在IE和Edge中不起作用

  6. 6

    字体在 Microsoft Edge 或 IE 中不起作用

  7. 7

    转换比例(1)在Microsoft Edge中不起作用

  8. 8

    SVG 徽标投影属性在 IE 中不起作用

  9. 9

    CSS在Chrome / Firefox中不起作用(渲染)但在IE10 / Edge中起作用

  10. 10

    Microsoft Edge / IE SVG变换比例动画不起作用

  11. 11

    使用flexbox时,溢出属性在IE Edge和Firefox中不起作用

  12. 12

    使用flexbox时,溢出属性在IE Edge和Firefox中不起作用

  13. 13

    在Microsoft Edge中的SVG内部转换元素不起作用

  14. 14

    IE / EDGE底边空白不起作用

  15. 15

    某些属性在IE中不起作用

  16. 16

    数据属性在IE中不起作用

  17. 17

    SVG scale()在Edge(Not Edge Chronium)上不起作用

  18. 18

    localstorage 中的 JSON 数组在 IE 和 Edge 中不起作用

  19. 19

    使用Ajax渲染ViewComponent在Edge / IE11中不起作用

  20. 20

    该Javascript在IE或Edge中不起作用。任何人有任何想法吗?

  21. 21

    具有表格和绝对定位功能的Flexbox在IE 10、11或Edge中不起作用

  22. 22

    Edge和IE11中的CSS过渡不起作用

  23. 23

    伪元素前后的 CSS 在 Edge 和 IE 11 中不起作用

  24. 24

    SVG图像标签在Firefox或IE中不起作用

  25. 25

    SVG线动画在IE中不起作用

  26. 26

    jQuery CSS转换在IE8中不起作用?

  27. 27

    样式属性上的jQuery选择在IE中不起作用

  28. 28

    溢出属性在IE 11中不起作用

  29. 29

    下载标签上的属性在IE中不起作用

热门标签

归档