Load many svg files and change the fill

Question

i following Modify a svg file using jQuery and working 50% for me.

I want to show many images on a screen (SVG drawed in Inkscape), I have this already. the problem is that I want to paint with a different color each image, if I have a circle with black background, I want to paint red or green. And regardless of the internal elements of each svg, will draw all. for example, if I have a svg with 5 squares should all be painted the same color

Images can be repeated, i can have 5 circle, 1 red, 1 blue, 2 green, and 1 #XXX

I tried

   function SetSvg(div,name,color){
        var dir="../images/";
        div.svg({
            onLoad: function()
                {
                var svg = div.svg('get');
                svg.load(dir+name+'.svg', {addTo: true,  changeSize: false});        
                },
            settings: {}}
            );
        //comment is bad intent :(
        //div.find("path, polygon, circle, square").attr("fill", "#ccc");

        //div.children('svg>g>rect').attr('fill','#FFF');  
        //div.attr('fill','#DDD');
        //var svg = div.svg('get'); 
        //$('rect', svg.root()).attr('stroke', 'red');
        //and
        //$('rect').attr('fill','green')
    }

but none work.

the problem could be that inkscape create id for all elements, and repeated images, clashing IDs

this is a testfile

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   viewBox="0 0 200 200"
   width="200"
   height="200"
   id="svg2">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="translate(0,-852.36218)"
     id="layer1">
    <path
       d="m 187.26672,105.16928 a 79.025597,72.799339 0 1 1 -158.051197,0 79.025597,72.799339 0 1 1 158.051197,0 z"
       transform="matrix(1.2329032,0,0,1.3383488,-33.450822,811.609)"
       id="path3755"
       style="fill:#000000;stroke:#ffffff;stroke-width:4;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none" />
  </g>
    </svg>

EDIT 1

function SetSvg(div,name,color){
            var dir="../images/";
            div.svg({
                onLoad: function()
                    {
                    var svg = div.svg('get');
                    svg.load(dir+name+'.svg', {addTo: true,  changeSize: false});        
                    },
                settings: {}}
                );

            $('path').attr('fill','red') //NOT WORKS IN LOAD
        }

        function svgClick(){

                $('path').attr('fill','green') // YES WORKS
            });
        }

but I want it when loading, not when you click

Could you post a jsfiddle of a few example objects, and the code ? It may also depend how complex the shapes are and how they are coloured. Can they all vary in complexity ? — Ian, Oct 31 '13 at 10:18
changes little, regularly are 1 or 2 figures, rect, or circle path with a fill and stroke, are simple polygons in all cases — user2547522, Oct 31 '13 at 16:02

score 1 · Answer 1 · answered Oct 31 '13 at 10:34

1

This should work to change the colour of the object above...jsfiddle here http://jsfiddle.net/TD4hD/

$( "#svg2" ).find("path").css('fill', 'red' ) ;

answered Oct 31 '13 at 10:34

Ian

13,724
4
52
75

works for 1 svg, if add 2 or more, only change fill for first instance. **and only works** in click event, but no in load svg see edit – user2547522 Oct 31 '13 at 16:40
Can you do a jsfiddle of an example with 2 objects highlighting the problem. Also try it in the onload function, as its possible you are setting it before its loaded in the svg. – Ian Oct 31 '13 at 16:47

Load many svg files and change the fill

1 Answers1