2

我的网页上有几个嵌入式 SVG。这是一个例子：

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>

我的理解是这应该允许 Windows 的高对比度模式来调整 SVG 的填充。然而，当页面上的所有其他内容在高对比度模式下发生变化时，SVG 都不会改变其填充颜色。它采用初始的 currentColor，但从不改变。有任何想法吗？

4

1 回答 1

0

我不知道这是否有帮助，但据我了解，以下示例在更改为高对比度模式时应该可以工作。父元素（主体）上的颜色属性控制 SVG 中的填充。当颜色被“覆盖”时，这也会影响 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>

于 2021-10-01T09:24:50.853 回答