普通の`img`やら`video`要素なら、`CanvasRenderingContext2D`の`drawImage()`で楽勝なんですが、SVGは画像であって画像ではないので、ひと手間が必要・・・。
地味に面倒だったのでメモ。
やりたかったこと
こうなった
const SIZE = 400; // // SVG // - change color by CSS via inline-svg // const $svg = document.querySelector("svg"); $svg.querySelector("path.a").style.fill = "#e8e733"; // // CANVAS // - change color by canvas // - draw SVG above // const $canvas = document.createElement("canvas"); $canvas.width = $canvas.height = SIZE; const ctx = $canvas.getContext("2d"); ctx.fillStyle = "lightgreen"; ctx.fillRect(0, 0, SIZE, SIZE); const img = new Image(); img.src = "data:image/svg+xml," + $svg.outerHTML; img.onload = () => ctx.drawImage(img, 0, 0, SIZE, SIZE);
現状、SVGはいったん`img`要素を経由してから`canvas`に貼るしかない。
SVGを`img.src`にするところは、調べると他にもいろいろやりかたが出てくるけど、一番短く書くパターンがコレ。とりあえずChromeとSafariで動いたのは確認した。
噂によると、Operaは直で`drawImage()`できたらしい。