Databases
StackOverflow2013
Postsdbo
POIs it possible to linear-gradient-fill a grouped path in SVG (by css or attr on jQuery event)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs it possible to linear-gradient-fill a grouped path in SVG (by css or attr on jQuery event)
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload