I have this image generated with inkscape, what I need is to change each of the elements background color on hover and add/remove classes on click... has anyone accomplished this either by using JS/Jquery or is there some advice to make it work?.
<?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"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="216.14172"
height="216.14172"
id="svg2"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="cuadrado.svg">
<defs
id="defs4" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.15"
inkscape:cx="350"
inkscape:cy="142.29259"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="1278"
inkscape:window-height="768"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
width="1052.36px"
units="cm"
showguides="true"
inkscape:guide-bbox="true" />
<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 />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Capa 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(0,-836.22106)">
<rect
style="fill:none;stroke:#000000;stroke-width:0.74252009;stroke-opacity:1"
id="center"
width="105.19868"
height="105.27945"
x="55.705582"
y="891.74548" />
<path
style="fill:none;stroke:#000000;stroke-width:0.74252009;stroke-opacity:1"
d="m 55.705578,996.86712 105.198682,0 52.9246,53.28568 -211.693293,0 z"
id="rect3319-7-9"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.74252009;stroke-opacity:1"
d="m 213.99147,838.78016 -0.64542,210.56404 -51.95391,-52.31936 0,-105.27946 z"
id="rect3319-7-0"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.74252009;stroke-opacity:1"
d="m 55.540408,892.31605 0,105.27947 L 2.94107,1050.5608 3.586495,838.70491 z"
id="rect3319-7-0-3"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccccc" />
<path
onmouseout="evt.target.setAttribute('fill','none)"
onmouseover="evt.target.setAttribute('fill','yellow')"
inkscape:label="#rect3319-7"
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
id="path4286"
d="m 3.4264127,839.33911 210.4024473,0 -52.9246,52.63972 -105.198674,0 z"
style="fill:none;stroke:#000000;stroke-width:0.74252009;stroke-opacity:1" />
</g>
</svg>
EDIT
So far I have tried to change styling for hover event in external css like:
#center.hover{background-color:#F0F0F0}
after adding css declaration, of course
<defs id="defs4" >
<link href="style.css" type="text/css" rel="stylesheet"
xmlns="http://www.w3.org/1999/xhtml"/>
</defs>
but doesn't work, tried jquery.svg and doesn't work, image looks plain on browser and events seem to be ignored, this is my very first time working with SVG.
You can use the pseudo-element :hover on SVG elements:
#path4286:hover {
fill:yellow;
}
But you have to remove the inline styles from the tags, since they have precedence over the styles applied in the stylesheet (unless you don't care about using '!important' all the time).
You can remove the elements from the tree using DOM (calling removeChild from the parent node) but you can also obtain the same visual effect using CSS display:none as below:
var path4286 = document.getElementById("path4286");
path4286.addEventListener("click", function() {
path4286.style.display = 'none';
});
See: JSFiddle