SVG与Canvas 可以重叠在一起吗
SVG与canvas完全重叠，我想做个地图的可视化，在地图上加线条动画，想用SVG画地图，在地图上获取坐标，然后在canvas层画线条动画
阿呆不呆
2015-01-30
6 回答
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/150
提交
取消
