本文介绍了用作 base-64 背景图像数据时如何更改 svg 填充颜色?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在一个项目中使用 SVG,像这样在 css 中加载:
I'm using SVG for a project, loaded in css like this:
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2222px%22%20height%3D%2238px%22%20viewBox%3D%220%200%2022%2038%22%20enable-background%3D%22new%200%200%2022%2038%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.style0%7Bfill%3A%09%23f47216%3B%7D%3C/style%3E%3Cpath%20d%3D%22M2.643%2038c-0.64%200-1.282-0.231-1.79-0.699c-1.074-0.988-1.143-2.661-0.154-3.735l13.13-14.258L0.664%204.4%20c-0.967-1.094-0.865-2.765%200.229-3.732s2.765-0.864%203.7%200.229L19.37%2017.592c0.898%201%200.9%202.545-0.035%203.542L4.588%2037.1%20C4.067%2037.7%203.4%2038%202.6%2038z%22%20class%3D%22style0%22/%3E%3C/svg%3E');
我有一些悬停状态可以通过更改箭头的填充颜色来突出显示.
I have some hover states to highlight by changing the fill color of the arrow.
现在,我只是将相同的 svg 数据与填充部分(填充%3A%09%23f47216%3B%7D%3C,其中 f47216 是颜色)更改为右侧/新的颜色.效果很好.不过,我想知道是否有其他更聪明的方法.
For now, I'm simply applying the same svg data with the fill portion (fill%3A%09%23f47216%3B%7D%3C where f47216 is the color) changed with the right/new color. Works pretty well. Though, I'd like to know if there's maybe some other smarter method.
推荐答案
使用过滤器CSS 的属性.对我来说,我想在悬停时将图标的颜色更改为白色:
Use filter property of CSS.For me I wanted to change the color of the icon to white on Hover:
filter: grayscale(1) brightness(2);
这篇关于用作 base-64 背景图像数据时如何更改 svg 填充颜色?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!