クリックすると新しいSVGがロードされます

Question

サイトでは何年も隠れていて検索していましたが、わからない問題が出てきました。

私は私の娘のための（非常に簡単な）ぬりえの本を作っています。私は1枚の絵を描くことができました（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?