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

The issue with jspdf is that it is failing to generate PDF documents of

I'm currently developing a resume builder app using ReactJS. One of the functionalities I'm working on is enabling users to download their resumes as PDFs. However, I've encountered an issue with the generated PDFs when using jsPDF. The down ...

javascripthtmlcssreactjsjspdf

Creating effective href anchors within an iframe using the `srcdoc` attribute

While loading some HTML content in an iframe using the srcdoc attribute, I encountered an issue where following anchor tag links inside the iframe caused the entire page to load within the iframe instead of scrolling to the linked id. You can see a demons ...

javascripthtmlcssiframe

Ways to enhance a Vue component using slots

I am looking to enhance a third-party library component by adding an extra element and using it in the same way as before. For example: <third-party foo="bar" john="doe" propsFromOriginalLibrary="prop"> <template v ...

javascriptvue.jsvuejs2vue-componentvuetify.js

Ineffectiveness of Less Guard feature

I have a mixin with a guard clause that I've implemented following the provided guidelines. According to the syntax below, @palette should be selected from a list of custom colors and @color should be assigned a value from a specific set. The curren ...

cssless

CSS hover effect not working while mouse is in motion

As a beginner in HTML, CSS, jQuery, and JavaScript, I've been trying to trigger a div when hovering over one area using the adjacent siblings code. However, I'm encountering an issue where if I move my mouse after triggering the event, it keeps r ...

csshoversiblings

When employing jest alongside vue, an Unexpected identifier error may occur when attempting to import modules

I am currently diving into jest while utilizing vue3 and jest 26.6.3 for my project //pachage.json "jest": { "moduleFileExtensions": [ "js", "json", "vue" ], "moduleNameMapper": { "^@/(.*)$": "<rootDir>/src/$1", "^vue$ ...

vue.jsjestjs

Struggling to properly initialize the store in Vuex

I am currently working on setting up Vuex 4 within my Vue3 application. Below is the content of my main.js file: import { createApp } from 'vue' import App from './App.vue' import 'leaflet/dist/leaflet.css'; import { Icon } f ...

vue.jsvuex

Show or hide a fixed position div using jQuery when clicked

I am new to jQuery and I am trying to create a "full page menu" on my own. However, I am struggling to hide the menu on the second click. I tried using .toggle() but I found out that it has been deprecated. Can someone assist me with this? Thank you so muc ...

javascriptjqueryhtmlcsshide

Replace a single Vuetify icon with a Font Awesome SVG icon

Can individual icons from Vuetify be replaced with Font Awesome svg icons directly, without the need for a custom component for each icon? For example: import { svgPathData as envelopeSvg } from '@fortawesome/free-solid-svg-icons/faEnvelope' imp ...

vue.jssvgvuetify.jsfont-awesome

Vanishing scrollbar issue with HTML

After examining the code provided, I've almost achieved the desired outcome. The only issue is that there are no scroll bars present. I have identified two potential solutions: 1) One option is to remove the !doctype declaration at the beginning of t ...

htmlcss

Nuxt has the ability to display the object itself, however, it cannot render its

I am using a directus API to fetch data, which is returned in an array of objects. I can render the array or an object from it, but not when trying to access a property of the object <template> <div class="grid grid-cols-2 gap-6 mt-6&quo ...

javascriptvue.jsnuxt.js

Having trouble with Vue JS code to determine if a user is logged in

I am working on a Vue.js project and I am trying to implement a feature where the user needs to be logged in to access the website. If they are not logged in, they should be redirected to the /login page. As a beginner in Vue.js, I attempted the code below ...

vue.jssession

Vue: The enigmatic world of ghost properties?

During my project work, I encountered the following code snippet: Main component - <ParameterModal>: <template> <modal-wrapper props="..."> <!-- ... other similar templates are present... --> <template v-else-if="moda ...

javascripthtmlvue.js

Tips for updating CSS styles for multiple innerHTML elements using a JavaScript for loop

<div id="test"></div> <script type="text/javascript"> window.names=["jin kazama", "nina williams"]; window.values=[25, 37]; len=names.length for (var i = 0; i < len; i++) { document.getElementById('test').innerHTML+ ...

javascriptjqueryhtmlcss

Aligning content in CSS for cross-browser compatibility with Internet Explorer and Chrome

My CSS grid has grid items that can easily be centered in Chrome by using the justify-items:center property, creating a magical effect. However, this solution does not work in Internet Explorer as the items remain stuck to the left side. For reference: ht ...

htmlcssgoogle-chromeinternet-explorer-11css-grid

Problem with background video height on Elementor for Wide screen resolutions

Hello, I trust this message finds you in good health. I have a question regarding the video background on wide/big screens. The issue is that it displays correctly on all devices in Elementor settings and actual testing, except for widescreen LCDs, where ...

htmlcsswordpressvideoelementor

Utilize CSS to exclusively filter through items

Is it possible to use CSS alone to filter a list of items based on specific links being clicked? I have a list that should display only certain items when corresponding links are clicked. HTML: <!-- Header links --> <a href="#" class="all" tabin ...

htmlcssselectfiltertabindex

Is there a way to hide a specific character within a span element as securely as a password input field using

Can I use CSS to mask a span character similar to an input type password? Are there any properties like type="password" for the span or a specific class in Bootstrap such as class="mask" that can achieve this effect? https://i.stack.imgur.com/b8WQ4.png ...

htmlcssbootstrap-4

Smooth animation is not being achieved with the Jquery dlmenu

I have implemented a multi-level navigation menu using a demo of the jquery dlmenu plugin v1.0.2. Although most of the functions are working smoothly, the CSS3 menu navigation lacks the fluidity of the jQuery left/right sliding effect. Is there a way to ...

javascriptjqueryhtmlcssjquery-animate

Can cells be divided in a Material UI table?

Is there a way to split a cell in a Material UI table?I am aware that I can create a component to achieve this, but I'm wondering if there is another approach that I may not be aware of. Splitting a cell means having two values separated by a line wit ...

cssreactjsmaterial-ui