Search code examples
jqueryjquery-selectorssvgjquery-svg

loading external SVG with jQuery and change the SVG

I need to load an existing SVG document in order to do some modifications: changing color and replace all circles by rectangles.

I read a lout about using javascript to access SVG nodes, or Raphael extension or jQuery SVG.

I decided to use jQuery SVG, because (in one of the documents I read there was written:) it's not possible to change an existing, loaded SVG with Raphael. I'm not sure, if it is true.

On the other hand, some ware was written: jQuery SVG plugin is outdated?!

I'm not sure, if this is correct.

Right now, I use jQuery SVG plugin to load the SVG. The SVG consists of many circles, like this:

<svg version="1.1" width="" height="">
 <rect class="background" x="0" y="0" width="136" height="136" style="fill:white"/>
 <circle class="dot" cx="10" cy="10" r="2"/>
 <circle class="dot" cx="14" cy="10" r="2"/>
 <circle class="dot" cx="18" cy="10" r="2"/>
 <circle class="dot" cx="22" cy="10" r="2"/>
  [...]
 <style>
  .dot {fill:#000000;}
 </style>
</svg>

Now it should be possible: 1.) to change the color of all the circles by changing the class dot and 2.) replace all circles by rectangles.

To reach the first goal, I use svg.style(), like this:

mainSVG = $("#placehoplder").svg('get');
mainSVG.load(data, {addTo: true,  changeSize: false}); 
mainSVG.style('.dot {fill:'#f4a200'}');

This works, but it adds an additional style element/node to the SVG.

So the 1st question is: how to change/overwrite an exiting style element?

To reach the 2nd goal: I have no idea, how to handle this.

I have no idea, how to select SVG element in general. Using google, I still find the same stackoverflow questions again and again, which doesn't help me. Also the jQuery SVG documentation is not helpful at my point of knowledge. (because basics are missing)

For example this simple test to change the radius of all circles does not work.

allCircles=$('*[class~="dot"]');
mainSVG.change(allCircles,{r:10});

So the 2nd Question is: How to select a group of SVG elements (by class or element-type) in order to change them (or may i have to iterate trough?)?

Thank you.

Solution

  • After searching the web for e while, i decided to choose the following solution:

    So the 1st question is: how to change/overwrite an exiting style element?

    Changing an exiting style element is difficult, like changing an HTML style element with JS. I choose the following way (because it looks like the best alternative). Finaly it's removing the old style and adding a new:

    1. creating SVG on serverside with no style tag
    2. define an default style as an javascript object
      svgStyle = {'.dot':{'fill':'white'}}
    3. creating an method to transform the svgStyle into HTML source, which return mySvgStyle=' .dot {fill:white}
    4. Loading the SVG and apply the style Element to the SVG
      mainSVG.style(mySvgStyle);

    And now: all the time, i like to change the SVG style, i remove the old style SVG element $('style', mainSVG.root()).remove();, modify the svgStyle JS object (adding or remove properties) and creating the new SVG style tag (see #3 and #4 in the listing above)

    How to select a group of SVG elements (by class or element-type) in order to change them (or may i have to iterate trough?)?

    It looks like, an iteration is the onliest way. jQuerySVG plugin seams not possible to handle group of DOM (SVG) elements.