火狐瀏覽器對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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM