6

Possible Duplicate:
Changing SVG image color with javascript

I'd like to change the fill of an SVG image when I hover over it.

Right now I have a black question mark exported from Illustrator to SVG. I can put on my page with the img tag and it displays fine, however I have no idea how to change the color in code.

Community
  • 1
  • 1
Kenmore
  • 1,525
  • 3
  • 16
  • 39
  • I am not too familiar with SVGs, maybe you can change the background-color on hover? I did something like this for an assignment a while ago: http://bit.ly/Q1Irwv – BillyNair Aug 27 '12 at 03:58

3 Answers3

7

If you need to do hover effects in svg you shouldn't use <img> tags. Instead reference the svg with an <iframe>, <object> or <embed> tag. If you want to save a http GET request you can put the svg markup inline in the html document.

Here's an example showing a simple fill hover effect inside an svg, and another one (slightly more complex that creates an outline on hover using a filter). Anyway, it's basically about applying a :hover CSS rule to set the fill color.

An example with all of the above ways of using svg can be seen here.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
2

SVG Files can be modified directly from javascript, i.e. properties of the "image" are accessible from within the DOM.

Look at this post from stack overflow: modify stroke and fill of svg image with javascript

It's important to remember that to do so, you cannot enclose the svg file in the common HTML <img/> tag, use instead the <svg>...</svg> as shown in the post.

EDIT: svg on w3schools

I added a link to w3schools so you can see more properties of the svg object

Have Fun

danie7L T
  • 384
  • 5
  • 13
-2

If you can post your code, maybe we can troubleshoot it for you.

Try following this: http://tutorials.jenkov.com/svg/svg-and-css.html

Alternatively (not exclusive to SVG), use this type of code with different images:

<img src="image1.svg"
onmouseover="this.src='image2.svg'"
onmouseout="this.src='image1.svg'">

Live demo: http://jsfiddle.net/JNChw/

ionFish
  • 1,004
  • 1
  • 8
  • 20