Kevin Powell - Community•2y ago

Using CSS custom property in inline SVG

I'm trying to replace a single character on a website with an inline SVG. I'm basing what I'm doing on Kevin's video "Basic, Intermediate & Pro animated hamburger icons". The main difference at this point is I'm doing it in a pseudo element:

.modal .close-button:after {
content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="var(--clr-neutral-100)"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>');
    fill: var(--clr-neutral-100);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 0.75;
    transition: transform 0.5s;
}

.modal .close-button:after {
content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="var(--clr-neutral-100)"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>');
    fill: var(--clr-neutral-100);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 0.75;
    transition: transform 0.5s;
}

I have the SVG working finally, but I can't get the custom property to apply. If I replace it with an actual color, it works. Is this just not possible as part of the content of a pseudo element or am I doing something wrong? I'm hoping for the latter.

8 Replies

b1mind•2y ago

can you put a minimal demo in codepen? I've not tried custom props in a data: string before, I'd have to play a bit Other option I can think of off hand is trying with a fallback fill="var(--clr-neutral-100, currentColor)" then you can also try setting color on the parent if that is an option another thing you could try is having the custom prop on the parent level

.model .clse-button {
  --svg-fill: var(--clr-neutral-100);
}

.modal .close-button:after {
content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="var(--svg-fill)"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>');
/* more stuff */
}

.model .clse-button {
  --svg-fill: var(--clr-neutral-100);
}

.modal .close-button:after {
content:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="var(--svg-fill)"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>');
/* more stuff */
}

assuming that clr-neutral is set in :root?

Tim Rinkel•2y ago

clr-neutral is set in :root and works outside of this pseudo element. currentcolor is an interesting thought. I tried it a few different ways but it didn't seem to make a difference. Here's the pen I was playing with: https://codepen.io/t_rinkel/pen/rNrmzBq .

Tim Rinkel

CodePen

Inline SVG Playground

...

b1mind•2y ago

thanks for the pen give me a bit and I'll play around.

MarkBoots•2y ago

Don't think it is possible within a url(). But, I just came up with this solution (kinda proud 😁) Make it a mask

.box::after {
  display: block;
  content: "";
  width: 100px;
  height: 100px;
  background-color: var(--clr-neutral-100, currentcolor);
  --mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="black"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>');
 -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
}

.box::after {
  display: block;
  content: "";
  width: 100px;
  height: 100px;
  background-color: var(--clr-neutral-100, currentcolor);
  --mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="black"><path d="m11.36 35.26-2.34-2.35 1.19-1.2 2.35 2.34 2.38-2.34 1.2 1.17-2.38 2.38 2.35 2.37-1.16 1.19-2.38-2.35-2.35 2.34-1.17-1.19 2.31-2.36z"/></svg>');
 -webkit-mask-image: var(--mask-image);
  mask-image: var(--mask-image);
}

MarkBoots•2y ago

Tim Rinkel•2y ago

@markboots. That certainly seems to work on my end. You have plenty to be proud of ‼️ I'll give it a shot in the real site. Thanks! Yep, that works on the site. Now I just need to tweak it back into place. Thanks!!

MarkBoots•2y ago

nice. you can use mask-size and mask-position for that (also with -webkit)

b1mind•2y ago

what wizardry is this sorry I got sidetracked with helping a friend >.>;;

Gaming

Programming

Using CSS custom property in inline SVG