1

I am trying to fill a svg image with css.

<object type="image/svg+xml" data="img/test.svg" style="fill: #FF0;">Your browser does not support SVG</object>

Somehow it doesn't work. Any Ideas? Thanks!

turboLoop
  • 601
  • 1
  • 4
  • 16
  • Use `background-color` instead of `fill`. (The latter is not valid in the HTML scope.) – r3mainer Feb 20 '14 at 14:32
  • Just tried it. when using background-color the background gets colored, but the image stays black. – turboLoop Feb 20 '14 at 14:35
  • set a `background-color` you dont need to use fill.... –  Feb 20 '14 at 15:01
  • @DOCTYPEHTML The OP isn't asking about setting a background color. They want to color the SVG itself, which is done with the fill property. – cimmanon Feb 20 '14 at 15:06
  • I just tested with a svg image I had and I was able to change background color of the image with specifying `fill: #ff0;` – Ismatjon Feb 20 '14 at 15:29

1 Answers1

0

CSS styles don't apply across document boundaries. The SVG is a separate document from the HTML.

However there are other ways to achieve the effect you want. For instance, you could use jQuery to alter the SVG on hover events. Or you could insert the correct CSS rules into the SVG at load time as per this trick from Eric:

How to apply a style to an embedded SVG?

Community
  • 1
  • 1
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181