项目中要用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. Java的访问权限(public并不等于默认)

    一共有四种访问权限,对应四个范围 1.private :只有本类内可以使用,即使是子类也没权使用 2.protect :子类和友好类能够使用,继承中经常用到 3.默认值,(就是什么都没写),只有同包名 ...

  2. HDU 1102 Constructing Roads(kruskal)

    Constructing Roads There are N villages, which are numbered from 1 to N, and you should build some r ...

  3. [转]MAC：删除终端默认前缀的计算机名

    MAC:删除终端默认前缀的计算机名 1.打开终端 输入 sudo vi /etc/bashrc,提示输入密码就是计算机的密码. 2.点击i将编辑模式改成insert修改文档,使用#注释PS1=’\h: ...

  4. IOS项目之弹出动画终结篇

    在之前写过IOS项目之弹出动画一.IOS项目之弹出动画二.IOS项目之弹出动画三,今天来一个终极封装已经上传到Github上弹出动画总结篇UIPopoverTableView. UIPopoverTa ...

  5. vim入门之配色方案(colorscheme)设置

    系统版本:ubuntu 16.04 LTS 刚开始用vim的时候,大家可能会觉得默认的语法高亮的颜色不合心意,不过对于vim来说,这并不是一个问题.其实vim的配色方案是可以更改的,既可以选择系统自带 ...

  6. 问题集录--新手入门深度学习，选择TensorFlow 好吗？

    新手入门深度学习,选择 TensorFlow 有哪些益处? 佟达:首先,对于新手来说,TensorFlow的环境配置包装得真心非常好.相较之下,安装Caffe要痛苦的多,如果还要再CUDA环境下配合O ...

  7. Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    前言 发现群里有些问题的提问重复率太高了,每次都去回答,回答的贼烦.这里做一个大体的汇总,废话不多说,直接开始给出方案,不是手把手..若是连问题和解决都看不懂的..应该去补充下基础知识 问题汇总 Q: ...

  8. [转]emailjs-smtp-client

    本文转自:https://github.com/emailjs/emailjs-smtp-client/blob/master/README.md SMTP Client SMTP Client al ...

  9. C# 过滤sql特殊字符串方法

    1. /// <summary>    /// 过滤不安全的字符串    /// </summary>    /// <param name="Str" ...

  10. [javaSE] 网络编程（URL）

    获取URL对象,new出来,构造参数:String的路径 调用URL对象的getProtocal()方法,获取协议 调用URL对象的getHost()方法,获取主机 调用URL对象的getPath() ...