SVG set to fill currentColor but does not dynamically change in high contrast mode

I'm currently working with in-line SVGs on my website. Here's an example:

svg {
  fill: currentColor;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="-13 0 120 30" width="74px">
  <path class="cls-1" d="M20,12.82H24.6v8.31h8.52V12.82h4.62v21H33.12V25.39H24.6v8.43H20Z" transform="translate(-19.98 -12.82)" />
  <path class="cls-1" d="M42.78,12.82H58.62v4.11H47.37v4.26h9.9V25.3h-9.9v4.41h11.4v4.11h-16Z" transform="translate(-19.98 -12.82)" />
  <path class="cls-1" d="M62.88,12.82H67.5v16.8H78v4.2H62.88Z" transform="translate(-19.98 -12.82)" />
  <path class="cls-1" d="M81.45,12.82H90c5,0,8,3,8,7.26v.06c0,4.86-3.78,7.38-8.49,7.38H86.07v6.3H81.45Zm8.28,10.59c2.31,0,3.66-1.38,3.66-3.18v-.06C93.39,18.1,92,17,89.64,17H86.07v6.42Z" transform="translate(-19.98 -12.82)" />
</svg>

In theory, this should allow Windows' High Contrast mode to adjust the fill of the SVG. However, even though other elements on the page change color in high contrast mode, the SVG does not. It retains its initial color and does not update. Any suggestions?

htmlcsssvghigh-contrast

Answer №1

Perhaps this solution may be of assistance: from what I gather, the given example should function properly in High Contrast Mode. The color specified for the parent element (body) dictates the fill of the SVG. Any changes to this color will consequently impact the appearance of the SVG.

body {
  color: DarkSlateBlue;
  background-color: MidnightBlue;
}

svg {
  fill: currentColor;
}
<body>
<p>Text example</p>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" height="25px" viewBox="-13 0 120 30" width="74px">
  <path class="cls-1" d="M20,12.82H24.6v8.31h8.52V12.82h4.62v21H33.12V25.39H24.6v8.43H20Z" transform="translate(-19.98 -12.82)" />
  <path class="cls-1" d="M42.78,12.82H58.62v4.11H47.37v4.26h9.9V25.3h-9.9v4.41h11.4v4.11h-16Z" transform="translate(-19.98 -12.82)" />
  <path class="cls-1" d="M62.88,12.82H67.5v16.8H78v4.2H62.88Z" transform="translate(-19.98 -12.82)" />
  <path class="cls-1" d="M81.45,12.82H90c5,0,8,3,8,7.26v.06c0,4.86-3.78,7.38-8.49,7.38H86.07v6.3H81.45Zm8.28,10.59c2.31,0,3.66-1.38,3.66-3.18v-.06C93.39,18.1,92,17,89.64,17H86.07v6.42Z" transform="translate(-19.98 -12.82)" />
</svg>
</body>

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

Arranging icons at the bottom of the post with a text box that changes dynamically

My challenge is that when the content in a box overflows, the box size increases and pushes the icons out of place. I want to ensure that the icons remain in a fixed position. This is how it currently looks: The comment, delete, and likes count end up on ...

javascriptjqueryhtmlcss

Creating consistent widths for drop downs and text boxes in Bootstrap

I'm currently using VB.Net MVC, Razor, Bootstrap, and Visual Studio 2013. My clients have requested that the dropdowns match the width of the text boxes. Here is how I create my dropdowns: @<div class="row"> <div class="col-md-4"> ...

htmlcsstwitter-bootstrap

What should we name this particular style of navigation tab menu?

What is the name of this tab menu that includes options for next and previous buttons? Additionally, is there a material-ui component available for it? ...

javascriptcssreactjsmaterial-ui

Executing Basic Calculations Instantly with Live Data in Qualtrics

I am encountering an issue with displaying the values on a slider in Qualtrics. I need to show the value where the respondent has placed the handle, as well as the complementary value from the other end of the scale. For example, if the user has chosen 55, ...

javascripthtmlcssruntimequaltrics

Is it possible for the `position: fixed` property to interfere with mix-blend-mode, and if so, are there

Struggling to make box-shadows cooperate with different backgrounds? The traditional method involves using mix-blend-mode and adding a pseudo element behind the main one for the effect. You can see an example of this technique here (click the + icon in th ...

css

The styles are not being rendered on the Angular application

I have successfully implemented a Modal service with working HTML/CSS (Check it out on StackBlitz) div.cover { align-items: center; background-color: rgba(0, 0, 0, 0.4); bottom: 0; display: flex; justify-content: center; left: 0; ...

htmlcssangularangular8

Place a date picker in the recently added row

How can I add a date picker to a newly appended row using jQuery? $(document).on('click', '.fa-plus-square', function () { var newRow = $('.installment').html(); $('.payment').append('<div class="form- ...

jqueryhtmltwitter-bootstrap

The functionality of `config.assets.debug = true` fails to

I've encountered an issue with the configuration on development where config.assets.debug = true doesn't seem to work correctly. Instead of having multiple separate JavaScript and CSS file inclusions, I'm getting a consolidated one: <li ...

javascriptcssruby-on-rails

Please retain only the clean <p> elements using Jsoup and remove all other content

I'm struggling to figure out a simple solution for this problem. My elements consist of a mix of <p>, p class="example">, and <p><strong>...</strong></p>. All I want to do is preserve everything within the clean < ...

javahtmljsoup

My live website is plagued by an annoying horizontal scroll bar that doesn't appear in the local host version

I am struggling to remove the unwanted horizontal scroll bar on my live website, although it is not visible on my local host... <-- this is my website, built using Vite + ReactJs. I attempted to use overflow: hidden; and max-width: 100% on the body t ...

cssreactjswebweb-deploymentvite

Another component's Angular event emitter is causing confusion with that of a different component

INTRODUCTION In my project, I have created two components: image-input-single and a test container. The image-input-single component is a "dumb" component that simplifies the process of selecting an image, compressing it, and retrieving its URL. The Type ...

javascripthtmlangulartypescript

Calculate the total price using Jquery once selections have been made

I am looking to create a dynamic pricing feature where clicking on a checkbox will update the total price. The prices are calculated per day, so if days are added, the total should reflect that accordingly. Check out our demo here: http://jsfiddle.net/XqU ...

jqueryhtml

Verify if any choices are available before displaying the div block

I need to determine if there is a specific option selected in a dropdown menu, and then display a div if the option exists, otherwise hide it. I'm not just checking the currently selected option, but all available options. if (jQuery(".sd select opti ...

javascriptjqueryhtmlcss

Is it possible to include a class in a 'label' element?

Forgive me if this is a simple question, but I'm curious - is it possible to add a class directly to a 'label' tag without needing to enclose it in a 'span' tag for styling? As I delve into "CSS: The Missing Manual," the book instr ...

cssclasslabelformsstyling

Show only the image source (img src) and do not display the audio and video sources using jQuery

In my code, I need the following conditions to be met: when an image is posted from the backend, the video and audio sources should automatically hide; when a video is posted, the image and audio sources should hide; and when an audio file is posted, the v ...

javascripthtmljqueryajaxcoding-style

Overflow of nested item within flex container

I'm trying to make the content under "foo" fully scrollable, but I've been unsuccessful using flexbox. I attempted it with min-height, yet it didn't work out. Check out this JSFiddle for reference $('.ui.dropdown') .dropd ...

htmlcssflexboxoverflow

Is there a way for me to adjust the image dimensions so that it doesn't surpass the width of its parent container?

When working with images, it can be tricky to set the original width while also ensuring it fits within a parent container. For example, if the parent container has a width of 1000px, you may want the image to have a max-width of 100%, but not exceed 1000p ...

javascriptcssimage

Has the HTML attribute 'step' stopped functioning properly?

I'm currently working on an Angularjs project that primarily uses material design. I am trying to set up a timepicker using the input control with the type=time attribute. However, I want to restrict the user to select times only within a 30-minute ra ...

htmlangularjs

Searching for a way to sort out role-specific usernames in a dropdown menu using AngularJS?

Is there a way to effectively filter usernames based on specific roles in a dropdown using AngularJS? Hello, I am trying to filter the usernames with the 'KP' role in the dropdown list. Please refer to My plunker for more information. Init ...

htmlangularjsmeanjs

Design my div layout to resemble a tree shape

Take a look at this URL. I have dynamically created divs in a nested structure for a sports tournament. I need help styling the divs to match the tournament structure. This is how I want my structure to look. The code is functioning properly, it's ju ...

javascripthtmlangularjs