火狐浏览器对svg支持的一点不足
项目中要用svg实现一个如下图所示的风机扇叶转动效果
当用chrome浏览器打开,动画显示正常。用火狐浏览器打开扇叶静止不动,代码如下:
<svg xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" width="100%" moveX="0" moveY="0" fill="none" zoomScale="-100%" xmlns:xlink="http://www.w3.org/1999/xlink" onload="window.parent.init(evt, 1)" xmlns="http://www.w3.org/2000/svg" height="100%" visibility="visible" xml:space="preserve" name="D0C2D4B0C7F8BFD5B5F7CFB5CDB3D7DCC0C0475241.xml" viewBox="0 0 1691 959" >
<defs>
<!--风机-->
<g id="windleaf">
<polygon stroke-linecap="round" stroke-dasharray="none" x="88" y="165" fill="#999999" points="88,165 82,148 68,128 59,119 45,112 31,110 18,108 10,107 3,98 6,84 9,76 18,65 25,57 38,43 64,22 82,14 103,8 122,4 137,2 162,1 176,2 194,8 208,13 215,20 228,35 234,46 240,61 239,81 239,93 234,108 224,124 217,132 205,142 189,156 165,176 152,190 142,194 122,201 109,202 101,198 93,182 " stroke="#000000" fill-opacity="1" opacity="1" stroke-width="1" />
</g>
<g id="windgeneratorleaves-on">
<use xlink:href="#windleaf" transform="translate(0,-100)"/>
<use xlink:href="#windleaf" transform="translate(0,-100) rotate(-120 109,202 )"/>
<use xlink:href="#windleaf" transform="translate(0,-100) rotate(120 109,202 )"/>
<circle transform="translate(0,-100)" cx="109" cy="202" r="32" stroke="#FFFFFF" stroke-width="1" fill="#A0A0A0"/>
<animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" from="0 109 102" to="360 109 102" repeatCount="indefinite"/>
</g>
</defs>
<g esclass="fanType" transform="translate(83,86) scale(0.07)" id="id156401fan">
<use xlink:href="#windgeneratorleaves-off" x="0" y="0"></use>
</g>
<!-- TODO-->
</svg>
通过调试发现,在< defs>中预定义的风机转动动画,通过元素引用的时候,chrome浏览器显示正常,火狐浏览器显示不正常。当把animateTransform 放到use元素外时能正常显示。
正常显示的引用
<defs>
<!--风机-->
<g id="windleaf">
<polygon stroke-linecap="round" stroke-dasharray="none" x="88" y="165" fill="#999999" points="88,165 82,148 68,128 59,119 45,112 31,110 18,108 10,107 3,98 6,84 9,76 18,65 25,57 38,43 64,22 82,14 103,8 122,4 137,2 162,1 176,2 194,8 208,13 215,20 228,35 234,46 240,61 239,81 239,93 234,108 224,124 217,132 205,142 189,156 165,176 152,190 142,194 122,201 109,202 101,198 93,182 " stroke="#000000" fill-opacity="1" opacity="1" stroke-width="1" />
</g>
<g id="windgeneratorleaves-on">
<use xlink:href="#windleaf" transform="translate(0,-100)"/>
<use xlink:href="#windleaf" transform="translate(0,-100) rotate(-120 109,202 )"/>
<use xlink:href="#windleaf" transform="translate(0,-100) rotate(120 109,202 )"/>
<circle transform="translate(0,-100)" cx="109" cy="202" r="32" stroke="#FFFFFF" stroke-width="1" fill="#A0A0A0"/>
</g>
</defs>
<g esclass="fanType" transform="translate(83,86) scale(0.07)" id="id156401fan">
<use xlink:href="#windgeneratorleaves-off" x="0" y="0"></use>
<!-- animateTransform 放到了这里-->
<animateTransform attributeName="transform" begin="0s" dur="1s" type="rotate" from="0 109 102" to="360 109 102" repeatCount="indefinite"/>
</g>
火狐浏览器对svg支持的一点不足的更多相关文章
- jQuery的animate在火狐浏览器上不支持backgroundPositionX的解决方法
在网上找的ffSupp.js文件 /** * 自定义backgroundPosition的animate,支持火狐,jQuery1.8以上版本 * @author Meleong * v1.00 */ ...
- 火狐浏览器Firefox不支持alt怎么
因为HTML代码的解析不同,需要把标签文字"alt"换成"title",就可以在FireFox中正常显示了. 如下所示,IE对于alt和title均可以支持 但 ...
- 发现一个小技巧:火狐浏览器对phpmyadmin支持更友好
这段时间ytkah正在迁移服务器(A→B),为了方便起见,直接用phpmyadmin导入数据库.一般我们是用navicat来操作数据库的,但是服务器A设置了权限,无法用navicat连接,只好在浏览器 ...
- 【前端】jQuery的animate在火狐浏览器上不支持backgroundPosition的解决方法
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/4375678.html jQuery的animate是一个非常好用的东东,但某些动画效果支持得不够好,比如back ...
- Ubuntu16.04安装官方Firefox 火狐浏览器 延长支持版(Extended Support Release, 简称“ESR”)
Ubuntu16.04安装官方Firefox 火狐浏览器 延长支持版(Extended Support Release, 简称“ESR”) 延长支持版本(Extended Support Releas ...
- js里各浏览器解析XML,支持IE、火狐、Chrome等
js在chrome中加载XML,js加载XML支持ff,IE6+,Opera等浏览器 见代码: <!doctype html> <html lang="en"&g ...
- 关于火狐浏览器不支持img onerror的办法
项目中,要使用到缺省图,除了火狐浏览器,其它浏览器都支持img onerror事件.我使用到的解决的办法就是给图片的外层标签加背景,背景图用的就是缺省图. 上代码 <img src=" ...
- VLC网页插件添加对火狐浏览器的支持
原文转自:http://blog.csdn.net/gsls200808/article/details/25536113 1.用<embed>标签 下面这段代码只支持火狐,不支持IE & ...
- 火狐浏览器开始支持3D游戏和视屏通话
最近,Mozilla发布了第22版本的火狐浏览器,这个版本增加了对3D游戏.视频通话和文件分享功能的支持.现在使用者不必下载额外的插件或者第三方软件就可以使用上面的所有特性.为了鼓励更多的开发者为火狐 ...
随机推荐
- xcode发布ipa
--------Xcode------- product 产品 archive 存档 (等) distribute app 分发app development 开发者 next next (等 比较漫 ...
- eclipse 配置mapreduce环境出错
初学mapreduce,想在eclipse上配置mapreduce的环境,网上之类的教程,很多但是按照教程配之后,并不能正常运行. 碰到下面的错误: 15/10/17 20:10:39 INFO jv ...
- Java Reflect
Method method=demo.getMethod("sayChina"); method.invoke(demo.newInstance()); ...
- Gin实战:Gin+Mysql简单的Restful风格的API
我们已经了解了Golang的Gin框架.对于Webservice服务,restful风格几乎一统天下.Gin也天然的支持restful.下面就使用gin写一个简单的服务,麻雀虽小,五脏俱全.我们先以一 ...
- 解决java获取系统时间差8个小时 专题
在WIN7下发现一些Java的程序获取系统时间比真实时间差了8个小时,怀疑是Java程序沿用了低版本的JDK,获取时间时取的GSM 0时区,而中国是GSM +8,所以查了8个小时,解决办法如下: 修改 ...
- PHP项目学习1
最近在学习PHP,看了<轻松学PHP>,2天看完,学习了很多基础知识,可是没有出什么成果.然后看<PHP项目开发全程实录>,里面讲到一个online影视365网,刚好有一个朋友 ...
- ContextMenustrip 控件
ContextMenustrip 控件是由 System.Windows.Forms.ContextMenustrip类提供,也是ToolstripMenu对象的容器,用来创建窗体的右键显示的菜单,主 ...
- linux运维人员成长
原文地址:https://blog.csdn.net/kwame211/article/details/78059331 初级篇 linux运维人员常用工具拓扑详见: 1rsync工具 很多地方经常会 ...
- ASP.NET页面支持的指令
页面的处理指令 页面指令的处理用于配置执行该页面的运行时环境.在ASP.NET中,指令可以位于页面的任何位置,但良好且常见的习惯是将其置于文件的开始部分.除此,页面指令的名称是不区分大小写的,且指令的 ...
- 【Java】短信信息提取设计
问题产生:当有要求做信息有效性校验的时候,如何提取短信中有用的信息? 举个例子:有这样一条短信消息: [XXXXXX提醒]尊敬的客户,截止03月21日15:29,您本月套餐中包含手机上网国内流量累计1 ...