Load a new SVG on click

Question

Been lurking and searching on the site for years, but I have come across an issue I can't seem to figure out.

I am creating a (very simple) coloring book for my daughter. I have been able to nail down coloring a single picture (SVG). I am trying to give her multiple pictures to color. What would be the best method to load a new SVG, path and all, within a div when she click an image below the main canvas? I have put the SVG code inline and have called it by using PHP. Both seem to work for the initial page load but I can't 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

score 0 · Answer 1 · answered Apr 22 '16 at 20:15

0

  $('.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';

});

answered Apr 22 '16 at 20:15

Ashkan Mobayen Khiabani

33,575
33
102
171

Thank you for your solution. However, the 'canvas' element shows blank when I click on an image. Is an ajax to php script a viable solution? – shockey8oz Apr 23 '16 at 18:43

score 0 · Answer 2 · edited May 23 '17 at 12:16

0

First, test out the solution found here: Best practice for using SVG images?

Update code to toggle between two different shapes. If images is stored on another server, then you'd have to read up on CORS and reconfig the image server's Access-Control-Allow-Origin: setting.

Alternative solution is to use inline method: How do I fill/stroke an SVG file on my website?

edited May 23 '17 at 12:16

Community

1
1

answered Apr 24 '16 at 16:40

Alvin K.

4,329
20
25

Load a new SVG on click

2 Answers2