zoukankan      html  css  js  c++  java
  • 火狐浏览器对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>
    

    您的资助是我最大的动力!
    金额随意,欢迎来赏!

  • 相关阅读:
    在传统软件公司十年深恶痛绝的感受
    前端 100 问:能搞懂80%的请把简历给我
    中专毕业的他,是如何逆袭为 360 资深程序员?
    别再参加领导力培训课程了,这本领导力提升书籍推荐给你
    企业管理书籍推荐,读完这个系列的书就是上完了整个MBA
    如何做好人才管理?人才管理书籍推荐
    如何管理好员工?你可能需要看看这本人员工管理方面的经典书籍
    领导与管理的区别和异同:什么是领导?什么是管理?
    一名优秀的HR需要具备哪些素质与能力?
    销售书籍推荐:做销售你究竟该看什么书?
  • 原文地址:https://www.cnblogs.com/Corphish/p/7122455.html
Copyright © 2011-2022 走看看