javascript - 更改 svg 填充颜色，然后绘制到 Canvas

Question

我想要做的是加载一个 svg，将其填充颜色更改为随机值，然后将其绘制在 Canvas 上。事实证明，这比我想象的要困难得多。这是我目前的代码。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

//images
var bottomLeftTop = new Image();
var bottomRightTop = new Image();
var fullTop= new Image();
var leftMidSide = new Image();
var leftSide = new Image();
var rightMidSide = new Image();
var rightSide = new Image();
var topLeftTop = new Image();
var topRightTop = new Image();

bottomLeftTop.src = "img/bottomLeftTop.svg";
bottomRightTop.src = "img/bottomRightTop.svg";
fullTop.src = "img/fullTop.svg";
leftMidSide.src = "img/leftMidSide.svg";
leftSide.src = "img/leftSide.svg";
rightMidSide.src = "img/rightMidSide.svg";
rightSide.src = "img/rightSide.svg";
topLeftTop.src = "img/topLeftTop.svg";
topRightTop.src = "img/topRightTop.svg";

//draw
context.drawImage(fullTop,50,50);

我目前正在将我的 svg 作为图像对象加载，这仅适用于绘图但不允许我更改填充颜色。

我确实尝试过将我的 svg 转换为 Canvas 命令，这允许我更改填充，但需要大量工作才能正确缩放和定位，而且对于我正在处理的图像数量来说是不可行的。

在使用 Canvas 的同时，还有其他方法可以做到这一点吗？

Answer 1

诀窍是通过 XHR 将 svg 加载为 XML 并以任何你想要的方式对其进行操作，然后使用 data:image 格式从中创建图像。

例如

$.get('img/bottomLeftTop.svg', function(svgXml) {
  var img = new Image();
  var coloredSvgXml = svgXml.replace(/#3080d0/g,'#e05030');
  img.src = "data:image/svg+xml;charset=utf-8,"+coloredSvgXml;
  context.drawImage(img,0,0);
});

这是我创建的一个片段，用于演示操作原理。它使用 in-html 隐藏的 svg 节点在 2d Canvas 上绘制，然后通过正则表达式更改颜色并再次在同一 Canvas 上绘制:

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");



var svg = document.getElementById('tmpSvg')
var blueCircle = (new XMLSerializer).serializeToString(svg);
var img = new Image();
img.src = "data:image/svg+xml;charset=utf-8," + blueCircle;
context.drawImage(img, 0, 0);

redCircle = blueCircle.replace(/#3080d0/g, '#e05030');
img = new Image();
img.src = "data:image/svg+xml;charset=utf-8," + redCircle;
context.drawImage(img, 10, 10);

.wrapper {
  display: none;
}
#canvas {
  width: 400px;
  height: 300px;
}

<canvas id="canvas"></canvas>

<div class="wrapper">
  <svg id="tmpSvg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
    <style>
      circle {
        fill-opacity: 0.5;
        stroke-width: 4;
        fill: #3080d0;
        stroke: #3080d0;
      }
    </style>
    <circle id="my-circle" cx="50" cy="50" r="30" />
  </svg>
</div>

当然，没有什么能阻止您使用 JavaScript 内置的 XML 解析器和基于 XPath 的节点操作。但在这种特殊情况下，对于特定颜色，正则表达式可能更有效。