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'
推荐阅读