[ACCEPTED]-Is it possible to linear-gradient-fill a grouped path in SVG (by css or attr on jQuery event)-linear-gradients

your problem can be solved by setting the 48 gradients coordinate system to user space 47 (instead of the default object-bounding 46 box).

you might try

<defs>
    <linearGradient id="red_black" x1="0%" y1="0%" x2="0%" y2="100%" gradientUnits="userSpaceOnUse">
        <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
        <stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
    </linearGradient>
</defs>

the solution does not 45 defy the comment by e.nelson - what happens 44 here is that each subgroup representing 43 the nations still has its individual gradient 42 instance applied while all these instances 41 share the same coord origin and the same 40 transformations w.r.t the user space - so 39 at any point in the final rendering, it 38 doesn't matter which gradient instance is 37 visible.

two adjustments are required:

1. [ minor] you 36 have to adjust the y1/y2 offsets (or the 35 stop offsets) of the gradient definition 34 - as they refer to the user coord space 33 of the whole map, africa only covers a portion 32 of the gradient between the stops defined. try 31 y1="50%" and y2="100%".

2. [medium] if you have a look at svg 30 g-elements defining the country shapes you'll 29 note that some of them are subjected to 28 an additional translation. they effectively 27 shift the user coordinate system and therefore 26 also apply to the gradient which causes 25 the affected country shapes to appear like 24 blotches on the map. this spurios transform 23 is probably an artefact of the actions in 22 the generator used to create the map. it 21 can be remedied by adding the translation 20 offsets to each absolute coordinate in the path 19 elements inside the respective g-elements. as 18 these paths are defined using relative coordinates 17 for the pieces stitched together, this reduces 16 to altering the coords of the initial 'M' and 15 final 'C' commands in the path's d-attribute.

i 14 have cooked up an ad hoc perl script to 13 normalize the structure of the svg code 12 representing the country borders that implements 11 the abovementioned modifications. note that 10 these alterations can be done rather conveniently 9 in js too. This is the result.

hope that helps and drop me 8 a note if you need additional informations 7 on how to perform the adjustments mentioned.

PS: i 6 just noticed that mozambique is still missing 5 from the generated output - for that single 4 country's shape yet another translation 3 has been specified. this minor detail is 2 something to be added later today, however 1 ...

"Painting, however, is always done 15 on each graphics element individually, never 14 at the container element (e.g., a 'g') level. Thus, for 13 the following SVG, even though the gradient 12 fill is specified on the 'g', the gradient 11 is simply inherited through the 'g' element 10 down into each rectangle, each of which 9 is rendered such that its interior is painted 8 with the gradient."

http://www.w3.org/TR/SVGTiny12/painting.html#InheritanceOfPaintingProperties

What you're asking 7 for isn't possible, according to the spec. If 6 it's a requirement, you could explore one 5 of: having the SVG creator add mouse over 4 paths for you; combine the paths in code 3 on the server (potentially tricky); choose 2 a solid color instead of a gradient so the 1 problem isn't so obvious.

If you want to fill all of Africa with one 12 gradient, then you want the union the paths 11 for that fill. Maybe you should use a different 10 map? One with only the continents?

Anyway 9 one way to fix it would be to:

1. open it up in Inkscape
2. select all the paths that you want to fill
3. choose "Union" from the "Path" menu
4. save the file (or copy&paste the unioned path)

Another way:

1. Look for another map, see http://d-maps.com/ or http://commons.wikimedia.org. Here's one with the continents only, africa marked.

After 8 doing that you can apply the gradient to 7 that new path.

You could also do it in some 6 other ways, but they're probably not as 5 good for performance reasons. One of those 4 (not recommended) ways would be to fill 3 a rectangle with the gradient where you've 2 made a clip-path consisting of the paths 1 in the group. Something along these lines:

<clipPath id="clip">
  <use xlink:href="#africa"/>
</clipPath>
<rect width="100" height="100" fill="url(#grad)" clip-path="url(#clip)"/>
<g id="africa">...</g>

I think your problem might be that fill is inherited according 4 to the standard rules of CSS in SVG. So you'd need to set an explicit 3 fill of transparent on the child g elements. If 2 it's not that I'll come back and have another 1 look after you've got an online example.