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

OceanWP Theme with a Fixed Navigation Bar

Currently utilizing the oceanwp theme, I'm aiming to create a topbar that vanishes while scrolling and have the menu smoothly transition to the topbar location with some opacity. I attempted the following code snippet: #site-header { position: fixe ...

csswordpress

jQuery - class remains unchanged on second click event

Operations: Upon clicking on an element with the class thumb_like or thumb_unlike, a like will be added or removed for the image using a POST request. The element with the class thumb_count will increase or decrease based on user actions. For example, lik ...

javascriptjqueryhtml

I'm looking to create a unit test for my AngularJS application

I am currently working on a weather application that utilizes the to retrieve weather data. The JavaScript code I have written for this app is shown below: angular.module('ourAppApp') .controller('MainCtrl', function($scope,apiFac) { ...

javascripthtmlangularjsunit-testing

The concept of CSS sprites and managing background positions

I have been working on integrating a star-rating widget that requires the use of a sprite file. The sprite file I am using looks like this: https://i.stack.imgur.com/ZSMMj.png This is how my HTML is structured: HTML <span id="star-ratings" class="c ...

javascripthtmlcss

The issue with updating the menu class in Internet Explorer 8 is not being resolved

Here is a code snippet using JavaScript: var x = jQuery(window).innerHeight(); jQuery(document).scroll(function() { if (jQuery(this).scrollTop() >= x) { jQuery('#nav').removeClass('nav').addClass('topfix_nav'); ...

jquerycssinternet-explorer-8

Utilizing ng-repeat to loop through a div element that consists of various nested tags

I need to display multiple tabs, with each tab having a table where the values are populated from a database. The number of tabs is dynamic and fetched from another page of the application. All tables have the same structure but different values. How can I ...

javascripthtmlangularjsangularjs-ng-repeat

Step-by-step guide on incorporating edit, update, and discard functionalities within an Angular Material table component (mat-table)

I am currently working on implementing edit, update, and discard functions in an angular material table. While I have been able to successfully edit and update the table row wise, I am struggling with how to discard table rows. If you would like to see wh ...

javascripthtmlcssangularangular-material

What is the most efficient method to match a list of titles with a distinct list of their associated links using Beautiful Soup 4 (bs

Update: I've found the solution! list_c = [[x, y] for x, y in zip(titleList, linkList)] Initial inquiry: In my project to scrape a recipe website using bs4, I encountered a challenge where the titles and links were not directly paired. After extracti ...

pythonhtmlbeautifulsouphyperlink

Creating a custom progress bar using Javascript and Jquery

I developed a progress bar that is fully functional. Here is the HTML structure: <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style ...

javascriptjqueryhtmlajaxprogress-bar

Having trouble with spawning child processes asynchronously in JavaScript

I'm trying to figure out how to format this code so that when a user clicks a button, new input fields and redirect buttons are asynchronously inserted into the unordered list. Everything was working fine until I added the redirect button insertion fu ...

javascripthtml

Unusual hue in the backdrop of a daisyui modal

https://i.stack.imgur.com/fLQdY.png I have tried various methods, but I am unable to get rid of the strange color in the background of the Modal. Just for reference, I am using Tailwind CSS with Daisy UI on Next.JS. <> <button className='btn ...

javascriptcssreactjstailwind-cssdaisyui

Tips for selecting an <select> option value based on an URL parameter automatically

I have a 2-step form where I am successfully passing the first name in the URL from step 1 to step 2, but I am struggling to do the same for a select field. Here's an example of what I have: In the URL: ?firstname=Bob Form Field: <input type= ...

javascriptphphtmlselect

Tips for resolving the final item issue in Owl Carousel when using right-to-left (RTL)

Encountering a bug with the rtl setting in owl-carousel. When the rtl is applied to the slider and I reach the last item, the entire slider disappears! Here's the code snippet: var viewportWidth = $("body").innerWidth(); if (viewportWidth & ...

javascripthtmljquerycssowl-carousel

Guide to transforming plain text into HTML format using Angular 4

In my Angular application, I am facing the task of adding a value to an array where the value itself needs to be in HTML format. This means that when the value is displayed, it should render as HTML text. For instance, if someone hovers over the text, I ...

htmlangulartooltip

The dimensions of the pop-up window in Chrome's JavaScript are not displaying correctly

My goal is to launch a new chat room window on our website. The dimensions of the chat room are set to 750px x 590px. Below is the link I am using to trigger the javascript popup. <a href="javascript:void(0)" onclick="window.open('http://gamersuni ...

javascripthtmlcssgoogle-chrome

Exploring the Ins and Outs of Transition Testing in D3 v4

Previously, in older versions of D3, you were able to create unit tests that checked the state of a D3 component after all transitions had finished by flushing the timer with d3.timer.flush(). However, in D3 version 4, this has changed to d3.timerFlush(), ...

javascriptunit-testingd3.jssvgtransition

Guide to switching classes with jquery

On my webpage, I have a star rating system that I want to toggle between "fa fa-star" and "fa fa-star checked" classes. I found some information on how to do this here: Javascript/Jquery to change class onclick? However, when I tried to implement it, it di ...

javascripthtmljquery

What is the best way to incorporate a specific term from the class into CSS styling

I am working on a webpage that includes '<a> <i> <label>' elements with specific classes. <a class="icon-home"></a> <label class="icon-pencil"></label> <i class="icon-display"></i> I want to ...

htmlcsscss-selectors

The scroll feature in JavaScript is malfunctioning

After countless hours of troubleshooting, I still can't figure out why the code snippet below is not working properly on my website at : <script> $(window).scroll(function () { if ($(window).scrollTop() > 400) { ...

javascriptjquerycssscroll

Unrecognized files located within the same directory

My main.html file located in the templates folder also contains three additional files: date.js, daterangepicker.js, and daterangepicker.css. Despite including them in the head of the HTML as shown below: <script type="text/javascript" src="date.js"> ...

javascripthtmlcssanchor