javascript - 单击加载新的 SVG

Question

多年来一直潜伏在网站上并进行搜索，但我遇到了一个我似乎无法弄清楚的问题。

我正在为我的女儿制作一本(非常简单的)填色书。我已经能够确定为单张图片 (SVG) 着色。我正在尝试给她多张照片上色。当她单击主 Canvas 下方的图像时，在 div 中加载新的 SVG、路径和所有内容的最佳方法是什么？我已将 SVG 代码内联并使用 PHP 调用它。两者似乎都适用于初始页面加载，但我无法让二次加载工作。

这是我的尝试 - https://jsfiddle.net/shockey8oz/LL9048kg/

$('.thumb').click(function() {
   var choice = $(this).attr('id');
   $('.canvas').load('http://www.shockeyfamily.org/final/' + choice + '.svg');
});

谢谢， Shockey8oz

Answer 1

  $('.thumb').click(function() {
  var img = new Image();
img.onload = function() {
var can = document.createElement('canvas');
var ctx = can.getContext('2d');
    ctx.drawImage(img, 0, 0);
    $('.canvas').html(can.innerHTML);
}
   var choice = $(this).attr('id');
img.src ='http://www.shockeyfamily.org/final/' + choice + '.svg';

});