热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS翻译无法在IE11上使用SVGg-CSStranslatenotworkinginIE11onSVGg

IwanttomoveagroupofsvgelementsusingaGtag,butitisntworkinginIE,eventhelatestve

I want to move a group of svg elements using a G tag, but it isn't working in IE, even the latest version. It works in all other browsers. Please help.

我想使用G标签移动一组svg元素,但它在IE中不起作用,即使是最新版本。它适用于所有其他浏览器。请帮忙。

Do I need to use some other way of moving a group of elements in an svg?

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

http://jsfiddle.net/ahKpq/3/

http://jsfiddle.net/ahKpq/3/


    
        
    


g {
    transform: translate(10px, 0px);
    -ms-transform: translate(10px, 0px);
    -sand-transform: translate(10px, 0px);
    -webkit-transform: translate(10px, 0px);
}

4 个解决方案

#1


24  

IE11 supports the transform attribute even though it doesn't recognize the CSS style.

IE11支持transform属性,即使它不能识别CSS样式。

So you can simply set the attribute to match the style using Javascript:

因此,您只需使用Javascript设置属性以匹配样式:

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

g.setAttribute('transform', transform);

Fiddle

小提琴

#2


5  

if someone still needs this with jQuery this worked for me:

如果有人仍然需要这个jQuery这对我有用:

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

#3


4  

Sorry, curtis, no chance to get this working (as of 20.02.2015) - see official ie page here: https://connect.microsoft.com/IE/feedback/details/811744/ie11-bug-with-implementation-of-css-transforms-in-svg

对不起,柯蒂斯,没有机会让这个工作(截至2015年2月20日) - 请看官方ie页面:https://connect.microsoft.com/IE/feedback/details/811744/ie11-bug-with-implementation-的-CSS的变换功能于SVG

#4


0  

if someone still needs this with angularjs, this worked for me:

如果有人仍然需要使用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);
        }
    };
})

推荐阅读
  • 如何在HTML中获取鼠标的当前位置
    本文介绍了在HTML中获取鼠标当前位置的三种方法,分别是相对于屏幕的位置、相对于窗口的位置以及考虑了页面滚动因素的位置。通过这些方法可以准确获取鼠标的坐标信息。 ... [详细]
  • GetWindowLong函数
    今天在看一个代码里头写了GetWindowLong(hwnd,0),我当时就有点费解,靠,上网搜索函数原型说明,死活找不到第 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • JavaScript和HTML之间的交互是经由过程事宜完成的。事宜:文档或浏览器窗口中发作的一些特定的交互霎时。能够运用侦听器(或处置惩罚递次来预订事宜),以便事宜发作时实行相应的 ... [详细]
  • 用Vue实现的Demo商品管理效果图及实现代码
    本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细]
  • 本文介绍了如何在Jquery中通过元素的样式值获取元素,并将其赋值给一个变量。提供了5种解决方案供参考。 ... [详细]
  • 本文总结了在编写JS代码时,不同浏览器间的兼容性差异,并提供了相应的解决方法。其中包括阻止默认事件的代码示例和猎取兄弟节点的函数。这些方法可以帮助开发者在不同浏览器上实现一致的功能。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • PHP图片截取方法及应用实例
    本文介绍了使用PHP动态切割JPEG图片的方法,并提供了应用实例,包括截取视频图、提取文章内容中的图片地址、裁切图片等问题。详细介绍了相关的PHP函数和参数的使用,以及图片切割的具体步骤。同时,还提供了一些注意事项和优化建议。通过本文的学习,读者可以掌握PHP图片截取的技巧,实现自己的需求。 ... [详细]
  • Commit1ced2a7433ea8937a1b260ea65d708f32ca7c95eintroduceda+Clonetraitboundtom ... [详细]
  • 本文讨论了一个关于正则的困惑,即为什么一个函数会获取parent下所有的节点。同时提出了问题是否是正则表达式写错了。 ... [详细]
  • Python正则表达式学习记录及常用方法
    本文记录了学习Python正则表达式的过程,介绍了re模块的常用方法re.search,并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具,通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]
  • ASP.NET2.0数据教程之十四:使用FormView的模板
    本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观,与GridView和DetailsView不同,FormView使用模板来呈现,可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]
  • 在加载一个第三方厂商的dll文件时,提示“找不到指定模块,加载失败”。由于缺乏必要的技术支持,百思不得期间。后来发现一个有用的工具 ... [详细]
  • 现象:[root@localhost~]#dockerrun-d-p9000:80centos:httpdbinsh-cusrlocalbinstart.shd5b2bd5a7bc ... [详细]
author-avatar
英雄醉酒惜红颜_527
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有