Modify mix-blend-mode or filtering behavior in SCSS with an SVG (Vue)

Question

I'm working on a position: absolute navbar at the top of a page that holds a few svgs in <a>s. I need the SVGs to be black when they are in front of lighter colored divs (other Vue components), and white when in front of darker colored ones. The divs behind the SVGs could be dark red, light blue, etc., and the resulting fill of the svg should only be white or black.

Is there a way to do a special kind of SCSS thing where I can make my own mix-blend-mode or something? Or some other implementation with SCSS logic where you filter and then take the resulting color the rest of the way to white or black.

For example, a dark blue filtered 100% would return a lighter color, which should then complete to white.

I'm currently implementing a type of a solution by using a scroll handler that checks div positions, their respective background-color values, and then changes inline styles on the SVGs according to what is returned. I'm just hoping there's a clever SCSS/CSS solution out there instead of more JavaScript.

AfifeBetul AfifeBetul · Accepted Answer · 2021-03-27T00:40:29

If you define fill or stroke values in svg code as currentColor and use svg as a component, you can get whatever you want by giving a color value to svg in css.

function svgOnClick() {
  document.querySelector("svg").classList.add('blue');
}

svg {
  color: #e74c3c;
}

.blue {
  color: #3498db;
}

<svg onclick="svgOnClick()" height="210" width="400">
  <path fill="currentColor" d="M150 0 L75 200 L225 200 Z" />
</svg>

Modify mix-blend-mode or filtering behavior in SCSS with an SVG (Vue)

1 Answers