Modify a svg file using jQuery

Question

I have a svg file with some shape and some text. I\'d like to modify the svg at runtime, so that some shape can change color, and some text can change its content.

L

Answer 1

Done!

Finally I found documentation on jQuery.svg. and on svg itself.

Let's start with the code:

 



   




Click Me!

And this sample Red1.svg file:

Using jQuery, I loaded the external Red1.svg at runtime. With a click on btnTest I set the text and the fill color.

In my research I have found that:

1. With jQuery.svg I can access the elements in the SVG file and standard html tag

2. SVG lets you choose the way you want to set the fill color

   2a. with a style

       rect.css('fill','green');
   

   2b. with a specific tag

       rect.attr('fill','green');
   

So your code must change depending on the program that generated the svg.

Have a nice day.