Edit Question - KnowledgeHub

Title Body

How can i fill one gradient for a <g> in an SVG image instead of fill all the <g> s in the selected <g> ? 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. The javascript: <script type="text/javascript"> 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 > g", svg.root()).bind('mouseover', svgOver).bind('mouseout', svgOut).bind('click', svgZoom); }, settings: {} }); The SVG: <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <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"> <defs> <linearGradient id="red_black" x1="0%" y1="0%" x2="0%" y2="100%"> <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> <g id="world" transform="scale(1)" fill="#AAAAAA" stroke="#FFFFFF" stroke-width="0.1"> <g id="africa" name="africa"> // < i want to fill this <g id="er" transform="translate(-29.9017, -45.0745)"> // < instead of theese <path d="..."/> </g> <g id="yt"> // < instead of theese <pat

Tags (comma-separated) Cancel