火狐浏览器对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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SVG(Scalable Vector Graphics)是一种基于XML的矢量图形格式,它可以用来描述二维图形和图像。SVG图表在不同的浏览器中的兼容性可以通过以下几个方面来考虑: 1. 基本语法兼容性:SVG使用XML语法来描述图形,因此在不同浏览器中对XML的解析支持程度可能会有差异。但是大多数现代浏览器支持基本的SVG语法,包括火狐浏览器。 2. SVG元素和属性的兼容性:SVG定义了一系列的元素和属性来描述图形,不同浏览器对这些元素和属性的支持程度也可能有所不同。在编写SVG图表时,需要注意使用那些被广泛支持的元素和属性,以确保在不同浏览器中都能正确显示。 3. CSS样式的兼容性:SVG可以使用CSS来定义样式,包括颜色、填充、边框等。不同浏览器对CSS样式的支持程度也可能有所不同,因此在编写SVG图表时,需要注意使用那些被广泛支持的CSS样式。 4. JavaScript交互的兼容性:SVG可以通过JavaScript来实现交互效果,比如响应鼠标事件、动态修改图形等。不同浏览器对JavaScript的支持程度也可能有所不同,因此在编写SVG图表时,需要注意使用那些被广泛支持的JavaScript特性。 总的来说,SVG图表在火狐浏览器中的兼容性相对较好,但仍然需要注意一些细节。在编写SVG图表时,建议遵循标准的SVG语法和使用被广泛支持的元素、属性、CSS样式和JavaScript特性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值