Question

我想知道为什么只有最后一个SVG被绘制到这些动态创建的画布上。（另一个问题是没有在Firefox中绘制 - 到目前为止只有Chrome和Safari测试为正面）。

Det计划是 - 在循环中 - 替换内联SVG标记的字符串部分，以在不同的画布上显示不同颜色的SVG图形。

我无法理解为什么只有最后一个被绘制到画布上。

＆＃13;

var colorCombis = {
  "26bdfcfc643e": {
    "colors": ["26bdfc", "fc643e"]
  },
  "de7d1f0948b2": {
    "colors": ["de7d1f", "0948b2"]
  },
  "4e6a8e7e5252": {
    "colors": ["4e6a8e", "7e5252"]
  },
  "fc643e26bdfc": {
    "colors": ["fc643e", "26bdfc"]
  }
}

var svgHTML = document.getElementById("svgpic");
var bBox = svgHTML.getBBox();
var gallery = document.getElementById("canvasGallery");
for (var key in colorCombis) {

  colorCombis[key].canv = document.createElement("canvas");

  colorCombis[key].canv.id = key;
  colorCombis[key].canv.width = Math.floor(bBox.width * 3);
  colorCombis[key].canv.height = Math.floor(bBox.height * 3);
  colorCombis[key].canv.setAttribute("style", "background-color: #000000;");
  gallery.appendChild(colorCombis[key].canv);

  colorCombis[key].ctx = colorCombis[key].canv.getContext('2d');
  colorCombis[key].img = new Image();
  colorCombis[key].img.onload = function() {
    colorCombis[key].ctx.drawImage(colorCombis[key].img, 0, 0, Math.floor(bBox.width), Math.floor(bBox.height));
  }
  colorCombis[key].img.src = "data:image/svg+xml;base64," + btoa(svgHTML.outerHTML.replace(/ff6633/i, colorCombis[key].colors[0]).replace(/66cccc/i, colorCombis[key].colors[1]));
}

＆＃13;

canvas {
  margin: 0.2rem;
}

＆＃13;

<div id="canvasGallery"></div>
<div id="svgwrap" style="visibility: hidden;">
  <svg id="svgpic" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
	<circle style="fill:#FF6633;" cx="50" cy="50" r="30"/>
	<rect style="fill:#66CCCC;" x="30.4" y="66.2" width="39.3" height="8.4"/>
	</svg>
</div>

＆＃13;

只有最后一个图像在循环中绘制在画布上

0 个答案: