Question

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

我为女儿创作了一本（非常简单的）着色书。我已经能够确定单个图片（SVG）的着色。我想给她多张照片上色。当她点击主画布下方的图像时，在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';

});

Answer 2

首先，测试一下这里找到的解决方案：Best practice for using SVG images?

更新代码以在两种不同形状之间切换。如果图像存储在另一台服务器上，则您必须阅读CORS并重新配置图像服务器的Access-Control-Allow-Origin:设置。

替代解决方案是使用内联方法：How do I fill/stroke an SVG file on my website?

单击时加载新的SVG

2 个答案: