                        课程
                    
                        /前端开发
                        
                            /Html5
                        
                        /Canvas绘图详解

SVG与Canvas 可以重叠在一起吗

SVG与canvas完全重叠，我想做个地图的可视化，在地图上加线条动画，想用SVG画地图，在地图上获取坐标，然后在canvas层画线条动画

阿呆不呆

2015-01-30

源自：Canvas绘图详解 9-1

关注问题我要回答

4484

操作

收起

3 回答

摘星fy
2020-05-24

canvas可以直接载入svg，下面附上代码

<!DOCTYPE html>    
<html lang="en">    
<head>    
<meta charset="UTF-8">    
<title>Document</title>    
</head>    
<body>    
<svg id="svg" width="100" height="100" style="background: wheat;">    
<circle cx="50" cy="50" r="25" fill="red"></circle>    
</svg>    
<canvas id="canvas" style="background: pink"></canvas>    
<script>    
const canvas = document.getElementById('canvas')    
const gd = canvas.getContext('2d')    
const svg = document.getElementById('svg')    
let xml = new XMLSerializer().serializeToString(svg)    
xml = encodeURIComponent(xml)    
xml = unescape(xml)    
xml = btoa(xml)    
const img = new Image()    
img.src = 'data:image/svg+xml;base64,' + xml    
img.onload = () => {    
console.log(img.width, img.height)    
gd.drawImage(    
img,    
0, 0, img.width, img.height    
)    
}    
</script>    
</body>    
</html>