2

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 ?!

Shagohad
  • 361
  • 1
  • 10
  • 20
  • I wat trying also answers from this topic, but situation is the same. I dont have no idea what to do :( http://stackoverflow.com/questions/12583879/linking-to-css-in-an-svg-embedded-by-an-img-tag?rq=1 – Shagohad Jan 12 '14 at 21:39
  • See e.g. [this question](http://stackoverflow.com/questions/12583879/linking-to-css-in-an-svg-embedded-by-an-img-tag) – Thomas W Jan 12 '14 at 21:57
  • I put this link in comment under question. Didnt work :( – Shagohad Jan 12 '14 at 21:59
  • Yes. Each path have styles and id. " " – Shagohad Jan 12 '14 at 22:11
  • I'm sorry, pointing to the question you already found was pretty pointless. – Thomas W Jan 12 '14 at 23:24
  • No problem. Problem is why that wont work :/. – Shagohad Jan 12 '14 at 23:25
  • CSS that is defined inside the HTML which references the SVG won't have an effect on the SVG. You'd have to put the CSS into the SVG itself, or you could inline the SVG. Possibly [this](http://stackoverflow.com/q/14068031/1728830) can be of help. I'd strongly suggest cleaning up the SVG, getting rid of the style attributes because the same style attributes probably appear over and over again in your full SVG and cause problems when trying to apply the CSS (as pointed out by Jeremy). – Thomas W Jan 12 '14 at 23:36

3 Answers3

6

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)

Community
  • 1
  • 1
Jeremy
  • 2,642
  • 18
  • 36
  • Also, the code you've displayed has a problem where the CSS refers to `path6666` while the SVG defines `path3833`. – Jeremy Jan 12 '14 at 23:28
  • !important almost solve the problem !. Almost, because it works only if i put code from svg file directly into html. If i want use code from external file, the file is loading corectly, but css wont work.. Can You help me also with that ? :) – Shagohad Jan 12 '14 at 23:40
  • Thank You, but there is still problem with that. !important is working only if I copy whole code from svg and put into html (over 1000lines of code..). Do You think, good choice will be change the inkscape for any other program ?. Maybe then will be less problems with that.. – Shagohad Jan 13 '14 at 00:17
  • You need to verify that the CSS file is *actually* being used by the SVG file. (Use the dev-tools in whatever browser you're working in.) – Jeremy Jan 13 '14 at 00:18
  • Also note that you must add the processing instruction to the *SVG* doc, not the *HTML* doc. Sorry if that was confusing; I updated the answer. – Jeremy Jan 13 '14 at 00:21
  • 1
    Ok. I spent almost all night with that, and there still was a lot of problems. After i lost my patient, I decide to download trial version of Corel Suit. I run Corel Draw, import svg file, export to new svg file, change few thinks, and... EVERYTHING works fine !. Codes from inkscape takes over thousand lines of cods, here only 150 !. Applying styles is so easy, program is much easier.. with Corel Draw everything is much easier. But Jeremy i really want to Thank You for Your time. If You will be someday in Warsaw, send me a message and We will go for a beer :). – Shagohad Jan 13 '14 at 09:49
1

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.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242
  • All the time the same problem. SVG file is loading corectly but i cant change anything using CSS. I was trying with iframe and object.. Still nothing :( – Shagohad Jan 12 '14 at 22:37
0

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.

Abdallah Yashir
  • 33
  • 5
Shagohad
  • 361
  • 1
  • 10
  • 20