Download the new SVG on click

Question

For many years I hid and searched for a site, but I ran into a problem that I can’t understand about.

I am creating a (very simple) coloring book for my daughter. I managed to cover the coloring of one picture (SVG). I try to give her some pictures for coloring. What would be the best way to load the new SVG, the path and everything, into the div when it clicks the image under the main canvas? I put the SVG code in a string and called it using PHP. Both seem to work for the initial loading of the page, but I cannot get the secondary load to work.

Here is my attempt - https://jsfiddle.net/shockey8oz/LL9048kg/

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

Thanks, 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

-, : SVG?

. , CORS Access-Control-Allow-Origin:.

- : / SVG -?