SVG与Canvas 可以重叠在一起吗-慕课网

首页课程实战体系课手记专栏慕课教程

SVG与Canvas 可以重叠在一起吗

来源：9-1 在Canvas中使用其他HTML元素

阿呆不呆

2015-01-30 16:02

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

写回答关注

3回答

摘星fy: 2020-05-24 16:46:48

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>

0 0