欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Html里面渲染svga格式文件

程序员文章站 2022-05-28 15:32:16
...
<body>

<div class='w'>
    <canvas></canvas>
</div>

<style type="text/css">
    .w{
        width: 400px;
        height: 300px;
        background: red;
    }

    canvas { width: 200px; height:300px;}
</style>
<script src="https://cdn.jsdelivr.net/npm/svga.lite/svga.lite.min.js"></script>
<script>

    function playerSvga() {

        let svgaArray ='http://xxx/car.svga'
        const canvas = document.getElementsByTagName('canvas')[0]
        const downloader = new window.SVGA.Downloader()
        const parser = new window.SVGA.Parser()
        const player = new window.SVGA.Player(canvas)
        player.set({
            cacheFrames: true,
            intersectionObserverRender: true
        })

        downloader.get(svgaArray).then(fileData => {
            parser.do(fileData).then(svgaData => {
                player.mount(svgaData).then(() => {
                    player.start()
                    downloader.destroy()
                    parser.destroy()
                })
            })
        })
    }
playerSvga()

</script>
</body>

备注 'http://xxx/car.svga'   svga资源会存在跨域问题,需要服务端做下处理,本地调试时候可以写

'http://localhost:8080/本地项目目录/car.svga'

相关标签: 前端