Styling SVG with CSS and JS

Question

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.

Answer 1

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

Answer 2

As far as styling with CSS, you just need to target each piece by assigning it a class and then targeting it.

Example piece of an svg

<polygon class="one" fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" points="62.705,8.607 4.918,118.033 139.754,115.574 "/>

CSS

.one {
    fill: #ff0000;
}

Here is a fiddle:

The adding classes on click is tricky though, because the SVG has it's own sort of DOM - here is an article that seems to cover the specifics.

http://toddmotto.com/hacking-svg-traversing-with-ease-addclass-removeclass-toggleclass-functions/

Good Luck!