項目中要用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>中預定義的風機轉動動畫,通過
正常顯示的引用
<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>