1

The main idea is, I'm looking for the best way to add an SVG to a pseudo-element that still preserves its color-changing (for hover). And all of this preferably without HTML and definitely not JS. I'm looking for a simpler plug class and it's their sort of solution with CSS only.

I have read a discussion here: Is there a way to use SVG as content in a pseudo element ::before or ::after

Here mainly people are talking about adding it as a content as such:

content: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20en...)

Here the problem lies that I cannot change the color of the SVG.

The same lies with solutions just adding it as content or background.

The only way I could find doing this is through ` height: 25px; width: 30px;

-webkit-mask-size: contain;
mask-size: contain;

-webkit-mask-position: center;
mask-position: center;

-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;

background: #fff;

-webkit-mask-image: url('button.svg');
mask-image: url('button.svg');`

This is though quite a bit of boilerplate code that needs to be written. But it does allow the color to be changed on hover through the background field.

Is there a better way to do this on modern browsers (excluding IE11), or shall I stick to my tried and tested mask way of doing things.

I appreciate any and all input.

Nayana Chandran
  • 1,416
  • 1
  • 16
  • 30
GediTheJedi
  • 21
  • 1
  • 7
  • Try using `filter` on the pseudo-element to change it's color – Paulie_D Mar 30 '22 at 11:45
  • 1
    @Paulie_D filter does not seem to work, and is also completely crossed out with no explanation in Chrome dev tools – GediTheJedi Mar 30 '22 at 11:50
  • Which filter did you use `hue-rotate` etc...there are several techniques for changing colors like that. – Paulie_D Mar 30 '22 at 11:55
  • https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element?rq=1 – Paulie_D Mar 30 '22 at 11:58
  • @Paulie_D sorry for the late reply, the filter method seems to be not as flexible as the colors will not be as accurate which for me is quite important. – GediTheJedi Jul 11 '22 at 13:50

1 Answers1

1

This is easy if you flip the logic - instead of adding color on the hover - think of it as removing color when you are not hovering.

With CSS filters - you can convert your svg to greyscale - meaning that a color image / SVG is rendered as a black and white image. Then on hover - stop the filter / conversion and your svg will have its actual color.

Note that this only works with one color change - you cannot have different paths go different colors etc - but by reversing the color logic you get a black and white svg that turns colorful on hover.

The following div has a border - just to show the dimensions (and I would probably do the svg as the background image of the div rather than the ::before - but I left it as requested. The SVG is iniitally shown as black and on hover over the div - the svg turns red.... magic :)

div {
  height: 160px;
   width: 300px;
   border: solid 1px blue;
   position: relative
}

div::before {
  content: url('data:image/svg+xml;utf8,<svg version="1.1" id="" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink"  style="" xml:space="preserve"><path d="M150 0 L75 200 L225 200 Z" fill="red"></path></svg>');
  display: block;
    -webkit-filter: grayscale(100);
    filter: grayscale(100);
}

  
div:hover:before{
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}   
<div></div>
gavgrif
  • 15,194
  • 2
  • 25
  • 27
  • Oh cool this seems a bit easier, thanks. So from what I can see there is no other way to get specific colors then instead of grey-scale, apart from using the mask method I mentioned? Yet again thanks for taking your time to answer :) – GediTheJedi Mar 30 '22 at 23:02
  • 1
    Hiya - there are suggestions to use filters / rotating hues etc... but the only really effective way to change colors is to inline the svg into the html and then you will have full control of fill / stroke /animation etc. By making the svg an image the choices are limited, but the advantage is that the image iwll be cached so any further rendering will be quicker because it doesn't have to repaint / recalculate the svg coordinates and paths etc. It also makes the html cleaner by not have a million path co-ordinated scattered throughout the code. – gavgrif Mar 30 '22 at 23:30