Enhance mix-blend mode or filtering effects in SCSS using an SVG component in VueJS

I am currently developing a fixed navbar at the top of a webpage with several SVGs inside anchor tags. I want the SVGs to appear black when displayed over lighter colored divs (other Vue components) and white when displayed over darker colored ones. The background colors of the divs behind the SVGs could be dark red, light blue, or any other color, but the SVG fill should always be white or black.

Is there a way to create a custom mix-blend-mode using SCSS or another method where I can apply filters to achieve the desired effect? For instance, if a dark blue is filtered 100%, it should result in a lighter color that would then transition to white.

Currently, I am utilizing a solution involving a scroll handler that monitors the positions of divs, their background-color values, and adjusts inline styles on the SVGs accordingly. However, I am seeking a more efficient SCSS/CSS approach instead of relying solely on JavaScript for this task.

cssvue.jssassresponsivemix-blend-mode

Answer №1

By setting the fill or stroke values in your SVG code to currentColor and using the SVG as a component, you can easily manipulate its color by assigning a value to the color property in CSS.

function changeColor() {
  document.querySelector("svg").classList.add('blue');
}
svg {
  color: #e74c3c;
}

.blue {
  color: #3498db;
}
<svg onclick="changeColor()" height="210" width="400">
  <path fill="currentColor" d="M150 0 L75 200 L225 200 Z" />
</svg>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Importing data from JSON file stored in the assets folder in NUXT.js framework

If I have a file named assets/data/geo/regions.json in my NUXT.js project's folder structure, what is the best way to read data from it into my project? I attempted to use axios, but I am uncertain of the URL for this file as I have tested various po ...

jsonvue.jsaxiosnuxt.js

drag items on your smartphone with ease

Hello everyone, I am looking to make items draggable on a smartphone as well. Here is my HTML code: <input class="inputText mb-2 border border-primary rounded" v-model="newTodo" @keypress.13='addTodo' placeholder="W ...

javascriptvue.jsdrag-and-dropsmartphone

Simultaneous CSS3 animations on a pair of items

I am facing a styling challenge with a wrapper div that is positioned absolutely on the side of the page. Inside this wrapper, there is an unordered list of items. Here is the HTML structure: <div id="wrapper"> <ul class="menu"> ...

htmlcss

How to create a non-clickable section within a linked div

Website: I am interested in linking just the triangle banner located at the top right corner of the page. The triangle image is actually a transparent rectangle with only the triangle portion filled in, so I want to ensure that only that particular sectio ...

htmlcss

Vue.js is encountering an issue with receiving the accurate return value from a POST function

I am facing an issue where I am unable to receive the full data that is being sent from the frontend to the backend. Here is an example of the data structure that I am sending: { _id: 64a8a8e9903039edb52ccc4c, productName: 'Vial 2ml(US) Type1&apos ...

javascriptnode.jsvue.js

"Customizing the Material-ui TextField DOM Element: A Step-by-Step

After trying the code below, I was expecting to see a yellowish "Hi," but instead received [object Object]. Is there a way to correct this issue? Possibly utilizing InputProps would help, but I haven't been able to locate a comprehensive tutorial on ...

javascripthtmlcssreactjsmaterial-ui

What is the best way to send back a 401 error along with a personalized message?

I have encountered an AuthenticationException in my Web API while using the DoCdssLoginTests(...) method. When this exception is caught, I am currently returning a 401 error response, but I would like to include a custom message with it. Unfortunately, th ...

c#vue.jsasp.net-core-3.1webapi

"Emphasize menu items with an underline as you navigate through the

I am using Gatsby with React and have a navigation menu with links. I would like to make it so that when a link is clicked, a border bottom appears to indicate the current page, rather than only on hover. <ul className="men" id="menu"> ...

javascripthtmlcssreactjsgatsby

Play framework fails to apply style attributes correctly

When working with play-framework 2.3.x, I am in the process of creating a form and would like to show/hide it based on a model attribute. Typically, setting the style attribute manually using style = "display: none" and style = "display: block" works fine. ...

htmlcssscalaplayframework

Is it possible to refresh the webpage in Angular when the tab is clicked?

Can someone help me find a solution to reload an Angular app's page when the user selects the browser tab? I've been exploring using window.location.reload() for this purpose, but I need guidance on triggering it specifically when the tab is sel ...

cssangulartypescriptbrowserreload

Various titles utilized in Axios patch requests

After spending an hour exploring the Chrome console, I'm still unable to pinpoint the source of this bug. I'm in the final stages of updating the OAuth implementation in my Vue app. It all started when socialLink.js discovered the need to creat ...

javascriptvue.jsaxios

Steps for creating a jQuery function that responds to changes in a text box value

Currently, I have a text box containing certain values and a submit button alongside a slider. When I click the submit button, the slider changes. However, I would like to achieve the functionality where instead of clicking the submit button, changing the ...

javascriptjqueryhtmlcss

Tips for Showing Empty Data in a Nonexistent `<td>` Element within a Table

This particular query appears to be quite simple... I am seeking the HTML code for creating a table: <table> <tr> <th>Heading 1</th> <td>or</td> <th>Heading 2</th> </tr> <tr> ...

htmlcssxhtml

What could be the reason for the container div's height not being properly refreshed?

When adding elements to a container div with an initial height of 'auto', I assumed that the height would adjust based on the children elements added. However, this is not happening. Can anyone assist me in ensuring that the container div's ...

javascripthtmlcss

Discover the best way to showcase items within an arrayList using dual CSS styles!

I'm currently working on a project that involves an arrayList with two names: Bob and Steve. I have the requirement to display them in different colors, where Bob should be displayed in green and Steve in red. Component.CSS .Bob{ font-weight:bold; ...

cssangulararraylist

Utilizing React.hydrate in conjunction with Vue: A Beginner's Guide

Wondering about a unique scenario here - I have a website built with Vue and now I aim to showcase a library I developed in React. In order to steer clear of server-side rendering (SSR), I can simply wrap ReactDOM.hydrate(ReactApp, document.getElementById( ...

javascriptreactjsvue.js

Vue.js encountered an uncaught TypeError while trying to execute the 'drawImage' function

I am facing an issue with my vue.js application where I can successfully apply a filter to a photo, but I am unable to post it. The error message I am encountering is: Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingCon ...

javascriptimagevue.jscanvasbase64

The Vue Element UI Input Model Trim feature is strictly prohibiting the use of spaces

I've encountered an issue with Element UI's v-model trim functionality. While using the <el-input> element to trim input values, it does not allow spaces at all. On the other hand, when using a normal <input> element with v-model.trim ...

vue.jsinputvuejs2vue-componentelement-ui

jQuery Refuses to Perform Animation

I'm facing an issue with animating a specific element using jQuery while scrolling down the page. My goal is to change the background color of the element from transparent to black, but so far, my attempts have been unsuccessful. Can someone please pr ...

javascriptjqueryhtmlcss

Activate the button to effortlessly load pages with a visually engaging animation

I have been facing a problem for the past couple of days. I need help with achieving a specific functionality on my website. When button1 is clicked, I want to load the page in a div class named "loadpage" with an animation coming from the left. Similarl ...

jquerycssajaxhtml