こうする
async function loadAsImage(svg) {
return new Promise((resolve, reject) => {
const svgXml = new XMLSerializer().serializeToString(svg);
const blob = new Blob([svgXml], { type: 'image/svg+xml' });
const url = URL.createObjectURL(blob);
const img = new Image();
img.onload = () => {
URL.revokeObjectURL(url);
resolve(img);
};
img.onerror = (e) => {
URL.revokeObjectURL(url);
reject(e);
};
img.src = url;
console.log(url);
});
}
const img = await loadAsImage(svg);
ctx.drawImage(img, 0, 0); ポイント
XMLSerializer を使っているところ。svg.outerHTML だと HTML 的に解釈された svg なので、xmlns が入らず、単体の SVG としては正しくないものになっている。
ただ、ブラウザ自体は HTML の svg が xmlns を持っていることは知っているため、XMLSerializer を使うことで正しい svg にできる。
