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.