Changing path fill in svg file using css and javascript

Question

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

<img src="example.svg" />

, than in css style i put for example:

 <style type="text/css">
    #path6666
    { fill: green;
    }
    </style>

nothing happen. I dont wanna use jquery, only javascript and css. Please, help !..

UPDATE:

This is svg code:

<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">
<metadata
 id="metadata2991">
<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></dc:title>
  </cc:Work>
</rdf:RDF>
</metadata>
<defs
 id="defs2989">
<inkscape:path-effect
   effect="spiro"
   id="path-effect3794"
   is_visible="true" />
<inkscape:path-effect
   effect="spiro"
   id="path-effect3790"
   is_visible="true" />
<inkscape:path-effect
   effect="spiro"
   id="path-effect3786"
   is_visible="true" />
<inkscape:path-effect
   effect="spiro"
   id="path-effect3782"
   is_visible="true" />
<inkscape:path-effect
   effect="spiro"
   id="path-effect3778"
   is_visible="true" />
<inkscape:path-effect
   effect="spiro"
   id="path-effect2997"
   is_visible="true" />
 </defs>
<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" />
<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" />
<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" />
 </svg>

I'am, starting giving up. I dont understand that: inkscape is very popular free software. Why there is no ANY tutorial how do that ?!

Answer 1

Looks like you have three problems here:

---

Style cascade issue

Inkscape is defining the fill of path #path3833 in an inline style declaration. That's more specific than your style sheet rule, so it overrides it.

MDN has some good information about how the cascade works.

To solve your problem, in the style-sheet use !important on the declaration to override Inkscape's inline syle:

#path3833 {
  fill:green !important; /* override inline style */
}

---

Hosting the SVG in HTML

Note that Robert Longson's answer, to use <object type="image/svg+xml" data="[your file]"> rather than <img> is accurate; you can't change any part of an SVG hosted in an img tag.

---

Linking the CSS to the SVG

Static linking

To link the stylesheet you can add the following XML declaration to the SVG document:

<?xml-stylesheet type="text/css" href="your_style_sheet.css"?>

This should sit between the opening XML declaration <?xml version="1.0" ..., but come before the root svg element. Typically this means it should be the second line of the file.

Dynamic linking

To add a stylesheet through Javascript, you must create an XML processing instruction (i.e. the <? ... ?> markup). The SVG document object exposes a method to do that. However, getting a reference to the SVG document is tricky; you have to go through window.frames. That means you must know which "frame" of the parent HTML document contains the SVG. If you have one SVG file, it's easy. Otherwise, you might have to use trial-and-error.

In any case, this is roughly how it should go:

var frameNumber = 0; //this may vary depending on your page
var svgDoc = window.frames[frameNumber].document;
var procInstruction = svgDoc.createProcessingInstruction(
    'xml-stylesheet', // the type of processing instruction
    'type="text/css" href="your_style_sheet.css"' // the "data" of the PI
);
svgDoc.insertBefore( // the PI must come *before* the SVG root element
   procInstruction, svgDoc.childNodes[0]
);

This fiddle demonstrates the two techniques above, with data URIs instead of files. I can't get the dynamic part to work with data URIs, but if you can use a file instead it will work fine. (Firefox v26 / Win7)

Answer 2

When you use SVG as an image i.e. via an image tag or background-image css it isn't interactive i.e. mouseover and the like don't work.

This is so the raster mental model people have for images is consistent with SVG.

If you want interactivity you'll have to include the <svg> via and <object> or <iframe> tag instead.

Answer 3

I found a solution a long time ago, but I am writing it because someone might use it in the future. The solution was removing style from the path. Then everything worked perfectly.

Also I have to say: Inkscape is the best program for SVG that I have ever tried.