火狐浏览器对svg支持的一点不足

发布时间:2017-7-9 7:03:31编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"火狐浏览器对svg支持的一点不足 ",主要涉及到火狐浏览器对svg支持的一点不足 方面的内容,对于火狐浏览器对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>

通过调试发现,在中预定义的风机转动动画,通过元素引用的时候,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>


上一篇:jmeter将上一个接口返回值作为下一个接口的请求参数
下一篇:Android hybrid App项目构建和部分基本开发问题

相关文章

相关评论

本站评论功能暂时取消,后续此功能例行通知。

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

好贷网好贷款