title: Changing path fill in svg file using css and javascript
body: <p>Ok, i spent all day to trying "connect" css styles with svg files created in inkscape. I've got svg file with map and couple of path, and i want to change fill color when i mouseover on that path. Please, can You help me with that ? :/. If i'am creating </p>
  
  <pre><code>&lt;img src="example.svg" /&gt;
  </code></pre>
  
  <p>, than in css style i put for example: </p>
  
  <pre><code> &lt;style type="text/css"&gt;
      #path6666
      { fill: green;
      }
      &lt;/style&gt;
  </code></pre>
  
  <p>nothing happen. I dont wanna use jquery, only javascript and css.
  Please, help !..</p>
  
  <p>UPDATE: </p>
  
  <p>This is svg code:</p>
  
  <pre><code>&lt;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:xlink="http://www.w3.org/1999/xlink"
  xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
  xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
  id="svg2985"
  version="1.1"
  inkscape:version="0.48.4 r9939"
  width="1176"
  height="617"
  sodipodi:docname="mainMapa.svg"&gt;
  &lt;metadata
   id="metadata2991"&gt;
  &lt;rdf:RDF&gt;
    &lt;cc:Work
       rdf:about=""&gt;
      &lt;dc:format&gt;image/svg+xml&lt;/dc:format&gt;
      &lt;dc:type
         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /&gt;
      &lt;dc:title&gt;&lt;/dc:title&gt;
    &lt;/cc:Work&gt;
  &lt;/rdf:RDF&gt;
  &lt;/metadata&gt;
  &lt;defs
   id="defs2989"&gt;
  &lt;inkscape:path-effect
     effect="spiro"
     id="path-effect3794"
     is_visible="true" /&gt;
  &lt;inkscape:path-effect
     effect="spiro"
     id="path-effect3790"
     is_visible="true" /&gt;
  &lt;inkscape:path-effect
     effect="spiro"
     id="path-effect3786"
     is_visible="true" /&gt;
  &lt;inkscape:path-effect
     effect="spiro"
     id="path-effect3782"
     is_visible="true" /&gt;
  &lt;inkscape:path-effect
     effect="spiro"
     id="path-effect3778"
     is_visible="true" /&gt;
  &lt;inkscape:path-effect
     effect="spiro"
     id="path-effect2997"
     is_visible="true" /&gt;
   &lt;/defs&gt;
  &lt;sodipodi:namedview
  pagecolor="#ffffff"
  bordercolor="#666666"
  borderopacity="1"
  objecttolerance="10"
  gridtolerance="10"
  guidetolerance="10"
  inkscape:pageopacity="0"
  inkscape:pageshadow="2"
  inkscape:window-width="1280"
  inkscape:window-height="962"
  id="namedview2987"
  showgrid="false"
  inkscape:zoom="0.97789116"
  inkscape:cx="374.5729"
  inkscape:cy="311.15508"
  inkscape:window-x="-8"
  inkscape:window-y="-8"
  inkscape:window-maximized="1"
  inkscape:current-layer="svg2985" /&gt;
  &lt;image
  width="1176"
  height="617"
  xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/
  2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0a
  HBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIy
  BRRRQAUUUUAFFFFAB
  RRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFF
  FFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUUUAFFFFABRRRQAUUU
  UAFFFFABRRRQAUUUUAf/2Q==
  "
   id="image2993"
   x="0"
   y="0" /&gt;
  &lt;path
   style="fill:#2b54e6;stroke:#281300;stroke-width:1px;stroke-linecap:butt;
   stroke-linej oin:miter;stroke-opacity:1 ;fill -opacity:1"
   d="m 308.82783,502.72348 3.57913,4.60174 5.36869,2.04521 5.11305,
   3.57914 4.34608,3.83478 -0.76695,3.32348 -4.34609,4.09043 -3.57913,
   1.27826 -4.09044,
   -1.78956 -3.83478,-2.04522 -3.57913,-0.51131 -1.78956,-4.09043 -0.51131,
   -5.62435 1.53391, -6.3913 z"
   id="path3833"
   inkscape:connector-curvature="0" /&gt;
   &lt;/svg&gt;
  </code></pre>
  
  <p>I'am, starting giving up. I dont understand that: inkscape is very popular free software. Why there is no ANY tutorial how do that ?!</p>