How to transition fill colors when your svg is in "content: url(..)"

Question

What I am trying to do is use CSS transitions to change the fill color of the svg within "content: url(..)", instead of replacing the image completely.

HTML:

<h3>Hello World</h3>

CSS

body: { background-color: #121212; }

h3:after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="115" height="10" viewBox="0 0 115 10"><defs><style>.a{fill:#013963;}</style></defs><title>header-btm-sm-2</title><rect class="a" width="9" height="10"/><rect class="a" x="76" width="9" height="10"/><rect class="a" x="89" width="9" height="10"/><rect class="a" x="13" width="4" height="10"/><rect class="a" x="26" width="4" height="10"/><rect class="a" x="34" width="4" height="10"/><rect class="a" x="55" width="4" height="10"/><rect class="a" x="63" width="4" height="10"/><rect class="a" x="111" width="4" height="10"/><rect class="a" x="102" width="4" height="10"/><rect class="a" x="42" width="9" height="10"/></svg>');
  display: block;
  transition: all .25 ease-in;
}

h3:hover:after {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="115" height="10" viewBox="0 0 115 10"><defs><style>.a{fill:#f6f6f6;}</style></defs><title>header-btm-sm-2</title><rect class="a" width="9" height="10"/><rect class="a" x="76" width="9" height="10"/><rect class="a" x="89" width="9" height="10"/><rect class="a" x="13" width="4" height="10"/><rect class="a" x="26" width="4" height="10"/><rect class="a" x="34" width="4" height="10"/><rect class="a" x="55" width="4" height="10"/><rect class="a" x="63" width="4" height="10"/><rect class="a" x="111" width="4" height="10"/><rect class="a" x="102" width="4" height="10"/><rect class="a" x="42" width="9" height="10"/></svg>');
}

Here's my codepen

score 3 · Answer 1 · edited May 23 '17 at 12:30

The short answer is you can't, sorry.

To be more specific, you can not style svg images across document boundaries. You can only style inline svg. The problem with your approach is, that the content property does not allow you to insert or inline content into the page. What you are basically doing there is creating a 'shadow' img tag, so the restrictions concerning svg in img tags applies here as well.

There are already answers for that problem on SO. See for example:

You do have multiple options to solve your problem. You can inline your svg content and style it as you normally would.

There is however a neat little trick most people are not aware of; that is the use of the currentColor keyword. With that you can inherit the current color set by css on any parent element using the color property and use that in any other property accepting colors. In the example I use the color of the h3 element as the fill color of the first circle.

This approach has the advantage of not requiring any knowledge of the structure of the svg, if it is well crafted that is...

svg {
  height: 1em;
}
h3 {
  color: red;
  transition: all 0.5s
}
h3:hover {
  color: green
}

<h3>Hello 
  <svg viewBox="0 0 100 100" width="1em" >
    <circle cx="50" cy="50" r="45" fill="currentColor"/>
    <circle cx="30" cy="50" r="25" fill="white"/>
  </svg>
</h3>

Another approach as suggested in the other posts, is to use web fonts. If you use a font, all you do is insert text via the content property. this text can then be styled including using your font face.

@font-face {
  font-family: 'ean13_font';
  src: url('https://cdn.rawgit.com/Holger-Will/ean13-font/master/fonts/ean13.woff')
}
h3 {
  color:red;
  transition: all 0.5s;
}
h3:after {
  content: '_1*L2L3G4L5G2G3**R4R3R2R5R8*';
  font-family: 'ean13_font';
  font-size: 120px;
  font-weight: 200;
}
h3:hover {
  color: green;
}

<h3>Hello</h3>

Yet another approach would be to use js to insert, animate or change your svg. I will not go into detail here as I think the js/jquery solution is not very elegant...

How to transition fill colors when your svg is in "content: url(..)"

1 Answers1