1

I want to use a svg file as image in my website. I am using this:

<object id="mysvg" type="image/svg+xml" data="logo.svg">Your browser does not support SVG</object>

It shows the image in page. But now I want to modify the image. This is a one color(black) image. and I want to make it white. Like fill with white. What is the best way to do that? Can I also achieve the same result on hover of the image? Thanks

Imrul.H
  • 5,760
  • 14
  • 55
  • 88
  • 2
    Can you check : http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement – Roy M J Sep 02 '13 at 16:00
  • See http://stackoverflow.com/questions/1619600/consistently-change-background-colour-upon-hovering-over-an-svg-link. – Erik Dahlström Sep 03 '13 at 07:08

1 Answers1

2

You can modify the image from the html container using something like this:

var svgdoc = document.getElementById("mysvg").contentDocument;
var svgElement = svgdoc.getElementById("whatever the Id is of the black image");
svgElement.setAttribute("fill", "white");

For hover you'll need to put the logic in the logo.svg file itself i.e. create a <style> element and make a hover pseudo class rule to change the colour on hover.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242