title: Is it possible to linear-gradient-fill a grouped path in SVG (by css or attr on jQuery event)
body: <p>How can i fill one gradient for a <code>&lt;g&gt;</code> in an SVG image instead of fill all the <code>&lt;g&gt;</code>s in the selected <code>&lt;g&gt;</code>? </p>
  
  <p>In this case, I'd like to show africa, filled with just one gradient from yellow to red, but because of the sub-groups the fill makes many of gradients. </p>
  
  <p>The javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  function svgOver() { 
      var what = $(this).attr("id");
      $("#world #"+what, svg.root()).attr("fill", "url(#red_black)"); 
  } 
  function svgOut() { 
      $(this).attr("fill", "");
  }
  
  ...
  
  $("#map").svg({ 
      loadURL: 'http://teszt.privilegetours.hu/skins/privilege/svg/worldmap.svg',
          onLoad: function(svg) { 
          $("#world &gt; g", svg.root()).bind('mouseover', svgOver).bind('mouseout', svgOut).bind('click', svgZoom);
          },
      settings: {}
  });
  </code></pre>
  
  <p>The SVG:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"&gt;
  &lt;svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" mlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="570px" height="300px" viewBox="146.605 71.42 570 300" enable-background="new 146.605 71.42 570 300" xml:space="preserve"&gt;
  
  &lt;defs&gt;
      &lt;linearGradient id="red_black" x1="0%" y1="0%" x2="0%" y2="100%"&gt;
          &lt;stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1"/&gt;
          &lt;stop offset="100%" style="stop-color:rgb(255,255,0);stop-opacity:1"/&gt;
      &lt;/linearGradient&gt;
  &lt;/defs&gt;
  
  &lt;g id="world" transform="scale(1)" fill="#AAAAAA" stroke="#FFFFFF" stroke-width="0.1"&gt;
      &lt;g id="africa" name="africa"&gt; // &lt; i want to fill this
          &lt;g id="er" transform="translate(-29.9017, -45.0745)"&gt; // &lt; instead of theese
              &lt;path d="..."/&gt;
          &lt;/g&gt;
          &lt;g id="yt"&gt; // &lt; instead of theese
              &lt;path d="..."/&gt;
          &lt;/g&gt; 
          ...
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Sxmvb.png" alt="this is the africa"></p>
  
  <p>How can I fix this problem?<br>
  How can I fix this problem without adding an another <code>&lt;g&gt;</code> tag to the original image?</p>