SVG set to fill currentColor but doesn't update in high contrast mode

user_17047383 0
Viewed 303

I have a couple in-line SVGs on my webpage. Here's an example of one:

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>

My understanding is this should allow Windows' High Contrast mode to adjust the fill of the SVG. However, while everything else on the page changes in high contrast mode, neither SVG changes its fill color. It is taking on the initial currentColor, but then never changes. Any ideas?

high-contrast svg css html
1 Answers

I don't know if this helps, but as I understand the issue, the following example should work when changing to High Contrast Mode. The color property on the parent element (body) controls the fill in the SVG. When the color is "overwritten" this will also affect 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>

user_3220840
Related