项目中要用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支持的一点不足的更多相关文章

  1. jQuery的animate在火狐浏览器上不支持backgroundPositionX的解决方法

    在网上找的ffSupp.js文件 /** * 自定义backgroundPosition的animate,支持火狐,jQuery1.8以上版本 * @author Meleong * v1.00 */ ...

  2. 火狐浏览器Firefox不支持alt怎么

    因为HTML代码的解析不同,需要把标签文字"alt"换成"title",就可以在FireFox中正常显示了. 如下所示,IE对于alt和title均可以支持 但 ...

  3. 发现一个小技巧:火狐浏览器对phpmyadmin支持更友好

    这段时间ytkah正在迁移服务器(A→B),为了方便起见,直接用phpmyadmin导入数据库.一般我们是用navicat来操作数据库的,但是服务器A设置了权限,无法用navicat连接,只好在浏览器 ...

  4. 【前端】jQuery的animate在火狐浏览器上不支持backgroundPosition的解决方法

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/4375678.html jQuery的animate是一个非常好用的东东,但某些动画效果支持得不够好,比如back ...

  5. Ubuntu16.04安装官方Firefox 火狐浏览器 延长支持版（Extended Support Release, 简称“ESR”）

    Ubuntu16.04安装官方Firefox 火狐浏览器 延长支持版(Extended Support Release, 简称“ESR”) 延长支持版本(Extended Support Releas ...

  6. js里各浏览器解析XML,支持IE、火狐、Chrome等

    js在chrome中加载XML,js加载XML支持ff,IE6+,Opera等浏览器 见代码: <!doctype html> <html lang="en"&g ...

  7. 关于火狐浏览器不支持img onerror的办法

    项目中,要使用到缺省图,除了火狐浏览器,其它浏览器都支持img onerror事件.我使用到的解决的办法就是给图片的外层标签加背景,背景图用的就是缺省图. 上代码 <img src=" ...

  8. VLC网页插件添加对火狐浏览器的支持

    原文转自:http://blog.csdn.net/gsls200808/article/details/25536113 1.用<embed>标签 下面这段代码只支持火狐,不支持IE & ...

  9. 火狐浏览器开始支持3D游戏和视屏通话

    最近,Mozilla发布了第22版本的火狐浏览器,这个版本增加了对3D游戏.视频通话和文件分享功能的支持.现在使用者不必下载额外的插件或者第三方软件就可以使用上面的所有特性.为了鼓励更多的开发者为火狐 ...

随机推荐

  1. unity批量设置图片为etc2格式或者astc格式

    网上找了半天,没一个能用的,干脆自己写个,直接拷贝这个脚本就行 这个是ios版本的,安卓的话写在注释里面,去掉注释就能用了 现在ios支持一种新格式叫astc比原本的pvrtc压缩比更高,而且质量更高 ...

  2. AbstractQueuedSynchronizer,ReentraLock部分代码分析

    /* * ORACLE PROPRIETARY/CONFIDENTIAL. Use is subject to license terms. * * * * * * * * * * * * * * * ...

  3. hibernate与ibatis的区别

    Hibernate 是当前最流行的O/R mapping框架,当前版本是3.05.它出身于sf.net,现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架,当前 ...

  4. R语言 删除变量rm函数

    变量可以通过使用 rm()函数来删除.下面我们删除变量var.3.然后再打印变量时出现异常错误. rm(var.3) print(var.3) 当上面的代码执行时,它产生以下结果: [1] " ...

  5. lazy初始化和线程安全的单例模式

    1.双检锁/双重校验锁(DCL,即 double-checked locking) JDK 版本:JDK1.5 起 是否 Lazy 初始化:是 是否多线程安全:是 实现难度:较复杂 描述:这种方式采用 ...

  6. JSONP数据调用

     json 是一种数据格式  jsonp 是一种数据调用的方式. 什么是JSONP          为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是 ...

  7. [javaSE] 标识符大小写

    java中是严格区分大小写的. PHP中函数,类名称不区分大小写,变量和常量区分大小写 public class VariableDemo { public static void test(){ S ...

  8. 安装vmware player

    一.简介 什么是虚拟机? 虚拟机是通过软件来模拟一个完整的计算机系统.简单来说,你可以在当前系统中通过虚拟机软件运行另外一个系统,并且与当前系统隔离. 什么是vmware? vmware(virtua ...

  9. WebService,ASMX文件使用XML格式数据传递参数、验证与获取XML格式返回值的一种方式

    1:首先WebService方法定义,每个方法定义两个参数,一个用于验证权限,string格式的XML文本用于传输数据.最终目的实现,WebService方法,验证权限,获取XML数据,处理之后返回X ...

  10. BZOJ3193: [JLOI2013]地形生成

    传送门 Sol 第一问可以考虑按照山的高度从大到小放 但是这样如果遇到高度相同的就不好考虑,那么同时要求数量限制从小到大 这样每次放的时候后面的一定不会影响前面,并且高度相同的时候前面能放的位置后面的 ...