如何改变svg的颜色？

I'd like to draw an svg file on a canvas.The current code is like below:

我想在画布上绘制一个svg文件。当前代码如下:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
var img = new Image();
img.src = "simple SVG.svg";
context.drawImage(img, 0, 0);

But how to change the color of the svg showed on canvas, WITHOUT using canvg and embedded script(means modify the origin svg file is forbidden)? Is reading the svg file and replacing "fill=" a possible way?

但是如何更改svg的颜色在canvas上显示,没有使用canvg和嵌入式脚本(意味着修改原始svg文件是禁止的)?正在阅读svg文件并以可能的方式替换“fill =”?

1 个解决方案

#1

1. load svg into a dom object (How to change color of SVG image using CSS (jQuery SVG image replacement)?)

将svg加载到dom对象中(如何使用CSS更改SVG图像的颜色(jQuery SVG图像替换)?)

2. change its color with javascript (change dom node color attr)

用javascript更改颜色(更改dom节点颜色attr)

3. make the new svg dom as a image source, load it into canvas. (https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas)

将新的svg dom作为图像源,将其加载到画布中。 (https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas)