SVG - Implementing background color filters on paths

I am attempting to replicate the CSS styling I have already implemented for a class on an SVG element.

In CSS, the fill property inherits the current color of the parent element, let's say it's red for argument's sake.

Next, I add several linear gradients with different opacity values and apply various background blend modes to each gradient.

This setup works perfectly for the CSS class.

Now, what I have tried so far for the SVG is as follows:

<svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/">

    <!-- background-image: 
      linear-gradient(-180deg, rgba(black,0.69) 0%, rgba(black,0.69) 100%),
      linear-gradient(-180deg, rgba(black,0.100) 0%, rgba(black,0.100) 100%),
      linear-gradient(-180deg, rgba(black,0.49) 0%, rgba(black,0.49) 100%);
    background-blend-mode: luminosity, lighten, saturation; -->

    <defs>
        <filter id="f1" x="0" y="0" width="100%" height="100%">
            <feFlood x="0" y="0" width="100%" height="100%" flood-color="black" flood-opacity="0.69" result="lumiFill"/>
            <feBlend in="SourceGraphic" in2="lumiFill" mode="luminosity" result="lumiBlend"/>
            <feFlood x="0" y="0" width="100%" height="100%" flood-color="black" flood-opacity="0.1" result="lightenFill"/>
            <feBlend in="lumiBlend" in2="lightenFill" mode="lighten" result="lightenBlend"/>
            <feFlood x="0" y="0" width="100%" height="100%" flood-color="black" flood-opacity="0.49" result="saturationFill"/>
            <feBlend in="lightenBlend" in2="saturationFill" mode="saturation" result="saturationBlend"/>
        </filter>
    </defs>
    <rect width="300" height="100" filter="url(#f1)" />
</svg>

Although this does seem to change the color, I suspect it may be stopping at the first flood because when I remove the other two floods, it works fine.

Could someone please suggest what I might be doing wrong?

htmlcsssvgsvg-filters

Answer №1

The functionality is working properly as described. By adjusting the flood dimensions to be offset, you can observe that each primitive is executing the specified actions.

What specific outcome are you aiming to achieve? (Please provide a complete example of code, not just a CSS excerpt)

<svg class="shape" width="100%" height="100vh" preserveAspectRatio="none" viewBox="0 0 1440 800" xmlns:pathdata="http://www.codrops.com/">

    <!-- background-image: 
      linear-gradient(-180deg,  rgba(black,0.69) 0%,  rgba(black,0.69) 100%),
      linear-gradient(-180deg,  rgba(black,0.100) 0%,  rgba(black,0.100) 100%),
      linear-gradient(-180deg,  rgba(black,0.49) 0%,  rgba(black,0.49) 100%);
    background-blend-mode: luminosity, lighten, saturation; -->

    <defs>
        <filter id="f1" x="0%" y="0%" width="100%" height="100%" primitiveUnits="objectBoundingBox">
            <feFlood x="0%" y="0%" width="60%" height="100%" flood-color="black" flood-opacity="0.69" result="lumiFill"/>
            <feBlend in="SourceGraphic" in2="lumiFill" mode="luminosity" result="lumiBlend"/>
            <feFlood x="40%" y="0%" width="60%" height="100%" flood-color="black" flood-opacity="0.1" result="lightenFill"/>
            <feBlend in="lumiBlend" in2="lightenFill" mode="lighten" result="lightenBlend"/>
            <feFlood x="0%" y="0%" width="100%" height="50%" flood-color="black" flood-opacity="0.49" result="saturationFill"/>
            <feBlend in="lightenBlend" in2="saturationFill" mode="saturation" result="saturationBlend"/>
        </filter>
    </defs>
    <rect x="50px" y="50px" width="300px" height="100px" fill="red" filter="url(#f1)" />
</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

Guide to creating the onclick feature for a dynamic button in Meteor

<template name="actionTemplate"> {{#each action}} <button class="myButton" id={{_id}}>btn</button> {{> action}} {{/each}} </template> <template name="action"> <div class="sct" id={{_id}}> ...

javascriptjqueryhtmlcssmeteor

The click event fails to provide $event upon being clicked

Within my HTML structure in an angular 7 application, I have the following setup: My goal is to trigger the GetContent() function when any text inside the div is clicked. Strangely, when clicking on the actual text, $event captures "Liquidity" correctly. ...

javascripthtmlangular

Repeatedly animate elements using jQuery loops

Whenever I click a button, a fish should appear and randomly move over a container at random positions. However, in my current code, the animation only occurs once and does not repeat continuously. I want to create a generic function that can be used for m ...

javascriptjqueryhtmlanimation

extracting an empty value from this variable

When I click on an anchor tag using this operator, the value appears blank. I have multiple divs with the same class, so I used the .each() function, but I can't figure out where I'm going wrong. The desired output is that when I click on one of ...

javascriptjqueryhtml

Rotating Cursor during AJAX loading process

I utilize a WebGrid across many of my pages to showcase various products. Within the code snippet below, you can see how an item is added to the database when a user clicks on it: public bool ToCart(int userId, string partNumber, ...

c#jqueryasp.nethtmlajax

How to display only a portion of a background image on different devices - showing half on tablets and 1/4 on phones

Objective I want to display a background image at 100% width on a computer or laptop browser, showing only half of the image when cut vertically on a tablet, and one fourth of the image when cut vertically on a phone. What I've Attempted I tried usin ...

htmlcss

Ways to enable file/result downloads on a website using HTML

Could you please take a look at this repository: https://github.com/imsikka/ArtGallery I am looking to create a downloadable result using a download button. I can create the button, but I am unsure of how to make the file actually downloadable. Do I need ...

javascripthtmlcssuser-interface

Using CSS to create a background color gradient

As I work on my website, I am experimenting with a background that transitions from one color to another. The colors I am using are #87a0b4 and #6a86a0. I have encountered two issues: Firstly, the transition is not displaying correctly on Internet Explor ...

cssgradient

Issues with loading SASS or source maps arise when dealing with nested structures

After reorganizing my SASS files into a nested structure, I encountered an issue where inspecting elements in Chrome led me to incorrect source maps. For instance, when trying to inspect a button, instead of being directed to the _buttons partial as expect ...

javascriptcssangularjssassgulp

Ensure selected language is maintained when refreshing or changing view by utilizing switch i18n functionality

Hello there, I am facing a challenge with "JavaScript Localization" on my website. The issue is that I cannot figure out how to prevent the DOM from prioritizing the local language of the browser and instead use the language set in the switch as a referenc ...

javascripthtmljsoninternationalization

Steps to eliminate the gap between the link element and toggler in Bootstrap 4

Incorporating the code below will create a navigation bar with a cart icon in Bootstrap 4, indicated by the images. The expanded view showcases the cart next to the search section on the right. When viewed on smaller devices in collapsed mode, it should al ...

htmlcsstwitter-bootstrapbootstrap-4

Child element's CSS is failing to apply, while the parent element's styling is functioning correctly

I have developed a small quiz application where, after answering questions, I display a progress bar. The issue I am facing is with the styling of the progress bar. I have set up two div elements for this purpose - one as the parent element (id = "progress ...

htmlcss

How to fix issue with uibModal not showing on full screen in AngularJS using HTML5

Having some trouble creating a uibModal in angularjs 1.6; my modal doesn't seem to be appearing on the entire screen as expected. What could potentially be causing this issue? ...

angularjshtmlbootstrap-4angular-ui-bootstrap

What is the best way to place a dropdown menu in front of buttons?

Here is an example snippet of HTML code that showcases a SweetAlert2 date picker popup for a button titled "Click me!": <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf ...

htmlcssbootstrap-5sweetalert2vanillajs-datepicker

What is the benefit of using background-size 200% instead of cover?

I am experimenting with using an inline SVG as a background-image through a data URL. I have noticed that background-size:cover doesn't seem to work properly in this case, but setting it to 200% makes it fit perfectly. I am interested in understandin ...

htmlcsssvg

When hovering over individual links within a set of blocks, ensure that the other links are not affected or disrupted

I need help creating a forum category link guide. Similar to this example... Specifically, I want it to display as Forums > The Financial Roadmap Two issues I am facing are: when hovering over the link, it shifts down one row and how can I add blocks ...

htmlcss

React-Native-Web generates default classes for inline styles and erroneously applies them in a jumbled sequence

Currently working on a project involving react native web and NextJS. I have encountered an issue with inline styles in React that seems to be caused by RN-Web. It appears that there is a mechanism within the framework that automatically generates classes ...

cssreact-nativenext.jsreact-native-web

What could be causing the text-end to fail in Bootstrap 5?

Why can't I align the text to the right? Feeling frustrated as a beginner. <div class="top-bar"> <div class="container"> <div class="col-12 text-end"> <p><a href="tel:06 ...

htmlcssbootstrap-5

Slider that is always being updated cannot be moved by dragging

Currently, I am utilizing React wrapped with cljs+reagent to develop a small application. One key feature I require is a slider that updates roughly every second and can be adjusted by the user. At present, my implementation looks like this: [:div.scrubb ...

htmlreactjsrange

Personalized navigation bar using the Bootstrap 5 framework

I am seeking to create a unique custom navbar layout with specific requirements: A centered logo 3 collapsible menu buttons on the left 2 icons (account and Instagram) on the right, always visible When the left menu is collapsed, I want to display a hamb ...

htmlcsstwitter-bootstrapbootstrap-5navbar