如何让我的 SVG 图标根据背景颜色自动更改其颜色?

如何让我的 SVG 图标根据背景颜色自动更改其颜色?

我正在尝试添加一些图标,~/.local/share/icons/以便我可以将它们与notify-send.我可以很好地做到这一点,但图标颜色不适应背景,与 Adwaita 图标不同,并且对比度最终非常低。

请注意,我可以只更改图标的颜色,但这不是一个可行的解决方案,因为该图标旨在与其他人共享,他们的通知可能有浅色主题。

GNOME 通知中的 Adwaita 图标如下所示:

带 Adwaita 图标的通知

这是我的其他图标在 GNOME 通知中的样子:

带有我自己的图标的通知

两个 .svg 文件具有相同的基色 (#2e3436),但只有 Adwaita 文件会自动更改,即使在深色背景上也清晰可见。我转换了 .svg 文件并对其进行了编辑,使其类似于 Adwaita 文件,但我仍然遇到同样的问题。

Adwaita 图标代码如下:

<?xml version="1.0" encoding="UTF-8"?>
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg">
    <path d="m 13.753906 4.660156 c 0.175782 -0.199218 0.261719 -0.460937 0.246094 -0.726562 c -0.019531 -0.265625 -0.140625 -0.511719 -0.339844 -0.6875 c -0.199218 -0.175782 -0.460937 -0.261719 -0.726562 -0.246094 c -0.265625 0.019531 -0.511719 0.140625 -0.6875 0.339844 l -6.296875 7.195312 l -2.242188 -2.242187 c -0.390625 -0.390625 -1.023437 -0.390625 -1.414062 0 c -0.1875 0.1875 -0.292969 0.441406 -0.292969 0.707031 s 0.105469 0.519531 0.292969 0.707031 l 3 3 c 0.195312 0.195313 0.464843 0.304688 0.738281 0.292969 c 0.277344 -0.007812 0.539062 -0.132812 0.722656 -0.339844 z m 0 0" fill="#2e3436"/>
</svg>

这是我将另一个图标制作成的:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M20.76 5.261c-.089.04-2.25 2.172-5.95 5.87L9 16.939l-2.83-2.826c-3.108-3.104-2.971-2.985-3.335-2.876-.218.065-.533.38-.598.598-.11.367-.263.192 3.236 3.692 3.507 3.507 3.308 3.333 3.697 3.232.153-.04.779-.654 6.302-6.172 3.372-3.37 6.17-6.189 6.218-6.264a.627.627 0 0 0-.033-.692c-.246-.349-.608-.498-.897-.37" fill="#2e3436"/>
</svg>

相关内容