html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
上面的svg加载并本机填充:#fff,但当我使用上面的css尝试将其更改为黑色时,它没有改变,这是我第一次使用svg,我不知道为什么它不工作。
html
<img src="logo.svg" alt="Logo" class="logo-img">
css
.logo-img path {
fill: #000;
}
上面的svg加载并本机填充:#fff,但当我使用上面的css尝试将其更改为黑色时,它没有改变,这是我第一次使用svg,我不知道为什么它不工作。
当前回答
我建议你选好颜色,去这支笔 https://codepen.io/sosuke/pen/Pjoqqp 它将十六进制转换为css过滤器,例如:#64D7D6
平等的
filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);
最后一个片段
.filterit { 宽度:270 px; 滤镜:反转(88%)棕褐色(21%)饱和(935%)色调旋转(123deg)亮度(85%)对比度(97%); } < img src = " https://www.flaticon.com/svg/static/icons/svg/1389/1389029.svg " 类= " filterit />
其他回答
如果你想要一个动态的颜色,不想使用javascript,也不想使用内联SVG,使用CSS变量。适用于Chrome, Firefox和Safari。编辑:和Edge
<svg>
<use href="logo.svg" style="--color_fill: #000;"></use>
</svg>
在SVG中,将style="fill: #000"的任何实例替换为style="fill: var(——color_fill)"。
我建议你选好颜色,去这支笔 https://codepen.io/sosuke/pen/Pjoqqp 它将十六进制转换为css过滤器,例如:#64D7D6
平等的
filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);
最后一个片段
.filterit { 宽度:270 px; 滤镜:反转(88%)棕褐色(21%)饱和(935%)色调旋转(123deg)亮度(85%)对比度(97%); } < img src = " https://www.flaticon.com/svg/static/icons/svg/1389/1389029.svg " 类= " filterit />
来自@Praveen的答案是可靠的。
我不能让它在我的工作中响应,所以我为它做了一个jquery悬停函数。
CSS
.svg path {
transition:0.3s all !important;
}
JS / JQuery
// code from above wrapped into a function
replaceSVG();
// hover function
// hover over an element, and find the SVG that you want to change
$('.element').hover(function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#CCC');
}, function() {
var el = $(this);
var svg = el.find('svg path');
svg.attr('fill', '#3A3A3A');
});
如果你的目标只是改变logo的颜色,你不一定需要使用CSS,那么不要使用javascript或jquery,因为之前的一些回答建议。
要精确地回答最初的问题,只需:
在文本编辑器中打开logo.svg。 寻找fill: #fff并将其替换为fill: #000
例如,你的logo.svg在文本编辑器中打开时可能是这样的:
<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" fill="#fff"/>
</svg>
... 只需更改填充并保存。
在代码编辑器中打开SVG图标,并在path标记后添加一个类:
<path class'colorToChange' ...
你可以向svg添加class,并像这样改变颜色:
codepen