Changing SVG color on hover inside span called as another style

Question

Hello I would like to know how I can select the SVG inside span and change it's color on hover.

My svg is called from another style inside span:

<a href="#"><div><span class=icon over"></span></div></a>

What I am trying to do is something like this:

a:hover > div > span { fill: #fff; }

But it is not working on the SVG. on the actual span it is working with other property.

So the question is how I can change the color of the SVG which is called with another style which contains svg inside the span element.

SVG Code:

.icon{

background: url(../img/sprite.view.svg) no-repeat;
    display: inline-block;
    text-indent: -9000px;
    white-space: nowrap;

}

.over {
    background-position: 80.45977011494253% 26.016260162601625%;
    width: 32px;
    height: 32px;
}

Is it an inline svg? Because you haven't got an svg in your markup.. — Chrillewoodz, Sep 11 '15 at 19:02
Check my answer and you will see what inline means and how you can operate on it. — Chrillewoodz, Sep 11 '15 at 19:40

Chrillewoodz · Accepted Answer · 2015-09-11T21:02:51.800

2

The reason to as why it's not working is because you can't change any colors when importing the SVG through an img tag, object tag or as a background of an element.

In order to manipulate an SVG with CSS it must be inline, inline as in:

<a href="#">
  <div class="svg-container">
    <svg></svg>
  </div>
</a>

Change your markup to what I've done above, with the entire SVG file inside the div, then apply the CSS like this:

.svg-container {

  > svg {
    fill: #fff;
    stroke: #000;
  }
}

As someone pointed out you can, however, change an object tag with Javascript should you need to use that instead of an inline SVG, should the SVG be really big.

edited Sep 11 '15 at 21:02

answered Sep 11 '15 at 19:14

Chrillewoodz

27,055
21
92
175

You **can** do it via object if you use javascript to inject the CSS. You are correct that it's not possible via img and background though. – Robert Longson Sep 11 '15 at 20:57
@RobertLongson Is that so? I tried about 2 weeks ago but it didn't want to work. Perhaps I missed something vital. – Chrillewoodz Sep 11 '15 at 21:00
@RobertLongson I don't think I have the code anymore, so it's not an issue :P – Chrillewoodz Sep 11 '15 at 21:11
[Erik explains how to do it here](http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg) – Robert Longson Sep 11 '15 at 21:15

Changing SVG color on hover inside span called as another style

1 Answers1