Change image (svg) per click

Question

I am trying to use Raphael + vectron and I am trying to change the svg image with the click of a button.

This (of course) is impossible due to the fact that when rendering svg it is displayed as a path:

<path cx="100" d="M35.269,257.154C34.393,245.68099999999998,45.438,234.091,48.492,223.00799999999998C53.634,204.34099999999998,54.985,185.004,60.041 and so on...... " stroke="none" fill="#9d49ce" style=""></path> 

Below is the code that would work if I worked with a normal image (e.g. .png), but the question is how to change the svg image using Raphael (and vectron).

HTML:

 <div id="container"> <div id="avatarBox" class="bgBox_blue"> <div id="charBody" class="svg-file" data-svg="img/body1.svg"></div> </div> <div id="toolBox"> <div class="toolboxArea"> Byt kropp<br/> <button id="moveLeftBtn"><</button> <button id="moveRightBtn">></button> <div class="clear"></div> </div> 

JS:

 $('.svg-file').vectron({ scale: 1 }).ajaxSuccess(function(){ $('svg').attr({ 'height': ($('svg').attr('height')*120)/100, 'width': ($('svg').attr('width')*110)/100, }); var paper = $('.svg-file').data('vectron').paper; var unicorn = paper.top; $('.bodyBg').live('click', function(){ unicorn.attr({ fill: $(this).val(), cx: 100 }); }); }); var moveRightBtn = $('#moveRightBtn'); moveRightBtn.on('click', function(){ var newImage = 'body' + (AvatarGenerator.eyes + 1) + '.svg'; $('#charBody').attr('data-svg','img/' + newImage); }); }); 

Answer 1

You can wrap the path in an svg tag.

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <path cx="100" d="M35.269,257.154C34.393,245.68099999999998,45.438,234.091,48.492,223.00799999999998C53.634,204.34099999999998,54.985,185.004,60.041 and so on...... " stroke="none" fill="#9d49ce" style=""></path> </svg> 

It will behave like an svg element. I tested it on Chrome and IE.

So, in your case, given the HTML file with this line:

 <div id="charBody" class="svg-file" data-svg="img/body1.svg"></div> 

Call $('.svg-file').vectron(); creates an svg child for charBody with content loaded from the file that is displayed on the page.

I would say, instead of calling vectron, you can directly add content from the string of the svg element to the innerHTML div where you want to add SVG.

vectron was last updated a year ago, so I don't have much hope from it. In addition, you only need to change svg to buttonclick, which can be easily done without vectron.