Inheritance of currentColor in SVG URLs

Seeking the same solution as mentioned in How can an SVG image inherit colors from the HTML document?, specifically when applied to an svg image used as content on a :before pseudo-element.

(The intended outcome is for both checkmarks to adopt the red color from the body. Currently, only the inline SVG does so.)

<style type='text/css'>
    body {
        color: red;
    }

    .checkmark {
        height: 2em;
        width: 2em;
    }

    .checkmark:before {
        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='currentColor' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='currentColor' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
    }
</style>

<!-- Renders red -->
<svg xmlns='http://www.w3.org/2000/svg' width='2em' height='2em' viewBox='-0.5 0 20 15'><rect fill='currentColor' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='currentColor' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>

<!-- Renders #000 -->
<div class="checkmark"></div>

See jsFiddle Demo

csssvg

Answer №1

content: url(...) transforms the URL portion into an image, essentially turning the SVG into its own distinct document. Since styles do not carry over between separate documents, using color to modify the SVG in this instance is not feasible.

On the contrary, when the SVG is inline, it becomes a part of the document, allowing for styles to be applied to it.

You have the option to create (or dynamically generate) multiple variations of the checkmark SVG and fine-tune the style rules so that the appropriate "pre-colored" version is chosen.

Answer №2

When dealing with certain scenarios where the icon remains the same color, you have the option to utilize a css filter on the element instead of altering its color.

For instance, avoid using currentColor in your SVG url and opt for a base color like red. Instead of adjusting the color on the containing element (considering your container is <body> for demonstration purposes, but I am referring to an 

<a href="#" class="checkmark">
here), include a filter to the element:

.checkmark {
    color: red;  /* aligns with fill in the SVG */
}

.checkmark::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='-0.5 0 20 15'><rect fill='red' stroke='none' transform='rotate(45 4.0033 8.87436)' height='5' width='6.32304' y='6.37436' x='0.84178'></rect><rect fill='red' stroke='none' transform='rotate(45 11.1776 7.7066)' width='5' height='16.79756' y='-0.69218' x='8.67764'></rect></svg>");
}

.checkmark::before:hover {
    filter: hue-rotate(120deg);  /* transitions both text and check from red to green */
}

To achieve the desired color transformation, experiment with the filter settings, such as modifying brightness or converting it to grayscale: https://css-tricks.com/almanac/properties/f/filter/

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

Choose CSS Option

I need assistance with customizing my dropdown select option - see the example below <select> <option value="volvo" title="NEED THIS BIGGER AND FORMATED" >Volvo</option> <option value="saab">Saab</option> <option val ...

htmlcsstooltiphtml-select

Click on the hyperlink to adjust the background size of an inline list item

I created a navigation bar using inline display for the li elements. I want my last column to have a defined height background. However, it is only displaying a background behind the name of the column. Here is the relevant section from style.css: #navi ...

htmlcssbackgroundhref

Displaying information collected from a submission form

I am in the process of designing a cheerful birthday card and I need to transfer data from a form to the birthday card page. How can I take information from the first div (which contains the form) and display that data in the second div? <!DOCTYPE ...

javascripthtmlcss

Issue with Responsive Font Size functionality in Tailwind and ReactJS not functioning as expected

I'm really struggling with this issue. I grasp the concept of mobile-first design and have successfully made my website's layout responsive. However, I'm having trouble getting the font size to change when applying breakpoints as the screen ...

javascriptcssreactjsresponsive-designtailwind-css

What is the best way to assign the order position in CSS?

I recently attempted to incorporate a CSS animated background into my project. Here is how it currently looks: The particle effect hovers above the menu list (which currently just says "test"). The CSS code for my particles is as follows: .circles { pos ...

cssreactjs

css content exceeds div boundaries

Hello, I am experiencing an issue with my webpage located at . When I zoom out, the content overflows from its containing div. Setting the height to auto or 100% works fine, but the left column ends up being smaller than the right one, and using clear do ...

css

The Bootstrap dropdown vanishes before I can even click on it

I recently encountered an issue with my Bootstrap dropdown menu on my website. After making some changes, the dropdown disappears after 1-2 seconds when viewed on a mobile phone. Interestingly, the original Bootstrap menu works fine, but not my customized ...

javascripthtmlcsstwitter-bootstrapdrop-down-menu

Error message: IndexError: list index out of range while attempting to trigger a click event using selenium

There are a total of 41 category checkboxes on the page, with only 12 initially visible while the rest are hidden. To reveal the hidden checkboxes, one must click on "show more." This simple code accomplishes that: [step 1] Loop through all checkboxes >> ...

pythoncssseleniumweb-scrapingscrapy

What causes an absolutely positioned element to be positioned by its sibling rather than at the top corner of the page?

Can someone explain to me why my absolutely positioned element is displaying after my child_static div? I'm under the impression that absolutely positioned elements are removed from the normal flow. So why isn't child_absolute covering the child_ ...

htmlcsscss-positionabsolute

What would be more efficient: inputting all items in a form at once or adding them one by one consecutively

My mind is preoccupied with a dilemma: is it better to have all possible items already on the form, or should items only be added when the user requests them? Let me elaborate - Imagine I have a form with 4 input fields and one textarea. Alongside that, t ...

jqueryhtmlcssajaxforms

How to create a CSS-only dropdown menu for IE 6 without relying on JavaScript?

While browsing different sites, I came across numerous css/js menu scripts that function well in browsers such as FF, IE7, Safari, and Opera when JavaScript is enabled. However, they do not work properly in IE 6 without a small JS file added to support t ...

cssaccessibility

Unable to get spacing correct on loading page

My attempt at creating a loading page using CSS and HTML has hit a roadblock. I'm trying to show a loading bar that ranges from 0% to 100%. Despite my use of justify-content: space-between, I can't seem to get it right. I've searched through ...

javascripthtmlcsssass

Show two <p>'s next to each other

I am trying to arrange 2 paragraphs side by side. <p class = "firstClass">This is the first paragraph.</p> <p class = "secondClass">This is the second paragraph.</p> Result: This is the first paragraph. This is the second paragra ...

htmlcssparagraph

Reveal and conceal grid elements upon clicking embedded links

I'm attempting to toggle the visibility of div content upon clicking a link. I've tried using a similar approach as shown in http://jsfiddle.net/fXE9p/, but unfortunately it didn't work for me. <body> Clicking on a button should m ...

jqueryhtmlcss

Utilize a jQuery button to horizontally align text with ellipsis

I am currently struggling to align some text with ellipsis horizontally alongside a jquery button and I cannot seem to determine the reason for this issue. You can view my problem on jsfiddle: http://jsfiddle.net/5bVDu/ <span> <span id=&apo ...

jqueryhtmlcssjquery-uivertical-alignment

The Bootstrap 4 card component is a versatile and stylish

Currently working on a display layout using Bootstrap 4, specifically utilizing cards. The issue I'm facing is that the text exceeds the limit of the card, causing it to overflow. Is there a solution to make the text automatically wrap to the bottom ...

javascripthtmlcssbootstrap-4

The menu field remains open even after clicking on the menu

I have encountered an issue with my code. Here is a DEMO that I created on jsfiddle.net Currently, when you click on the red div, the menu opens. However, if you click on the menu items, the menu area does not close. What do I need to do in order to clo ...

javascriptjquerycssajax

Tips for avoiding accidentally selecting nearby text while holding down a button on your mobile device

My application requires the user to press and hold a button to record audio. However, on mobile devices, when the user holds the button, the browser attempts to select nearby text due to finger pressure. While this behavior is understandable, I want to pre ...

javascripthtmlcssreactjsmaterial-ui

Unable to overlay a div on top of an image

Hello, I'm currently attempting to overlay a div on top of an image. Since the image needs to be responsive, it cannot be set as a background image. Here is the CSS I am using: #slider { margin:0 33%; width:67%; position:relative; } #sli ...

htmlcss

The function in jQuery that can be used to hide a <div> when clicked

I am facing a problem with my jQuery code that is supposed to remove/hide a specific div. Despite checking various examples, I can't seem to make it work properly. This issue arises in the context of jQuery on Drupal 7. The live site where this proble ...

javascriptjqueryhtmlcss