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,我不知道为什么它不工作。
当前回答
简单. .
你可以使用下面的代码:
<svg class="logo">
<use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>
首先指定svg的路径,然后写入它的ID,在本例中为“Capa_1”。您可以通过在任何编辑器中打开svg来获得它的ID。
在css中:
.logo {
fill: red;
}
其他回答
这是一个老问题,但最近我们遇到了同样的问题,我们从服务器端解决了它。这是一个php特定的答案,但我肯定其他envs有类似的东西。 您从一开始就将SVG呈现为SVG,而不是使用img标记。
public static function print_svg($file){
$iconfile = new \DOMDocument();
$iconfile->load($file);
$tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
return $tag;
}
现在呈现文件时,您将得到完整的内联SVG
您可以将SVG设置为掩码。通过这种方式设置背景色将充当填充色。
HTML
<div class="logo"></div>
CSS
.logo {
background-color: red;
-webkit-mask: url(logo.svg) no-repeat center;
mask: url(logo.svg) no-repeat center;
}
JSFiddle: https://jsfiddle.net/KuhlTime/2j8exgcb/ MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/mask
请检查您的浏览器是否支持此功能: https://caniuse.com/#search=mask
我建议你选好颜色,去这支笔 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 />
这个答案是基于https://stackoverflow.com/a/24933495/3890888,但是使用了一个简单的JavaScript版本的脚本。
您需要将SVG设置为内联SVG。你可以使用这个脚本,通过添加类svg到图像:
/*
* Replace all SVG images with inline SVG
*/
document.querySelectorAll('img.svg').forEach(function(img){
var imgID = img.id;
var imgClass = img.className;
var imgURL = img.src;
fetch(imgURL).then(function(response) {
return response.text();
}).then(function(text){
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(text, "text/xml");
// Get the SVG tag, ignore the rest
var svg = xmlDoc.getElementsByTagName('svg')[0];
// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
svg.setAttribute('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
svg.setAttribute('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
svg.removeAttribute('xmlns:a');
// Check if the viewport is set, if the viewport is not set the SVG wont't scale.
if(!svg.getAttribute('viewBox') && svg.getAttribute('height') && svg.getAttribute('width')) {
svg.setAttribute('viewBox', '0 0 ' + svg.getAttribute('height') + ' ' + svg.getAttribute('width'))
}
// Replace image with new SVG
img.parentNode.replaceChild(svg, img);
});
});
然后,现在如果你这样做了:
.logo-img path {
fill: #000;
}
或者可能是:
.logo-img path {
background-color: #000;
}
JSFiddle: http://jsfiddle.net/erxu0dzz/1/
使用滤镜转换为任何颜色。
我最近发现了这个解决方案,希望有人能使用它。 由于该解决方案使用过滤器,它可以用于任何类型的图像。不仅仅是svg。
如果你有一张单色图像,你只是想改变它的颜色,你可以在一些滤镜的帮助下做到这一点。当然,它也适用于多色图像,但你不能针对特定的颜色。只有整个图像。
过滤器来自于如何仅使用CSS过滤器将黑色转换为任何给定颜色中提出的脚本 如果您想将白色更改为任何颜色,您可以在每个过滤器中调整反转值。
.startAsBlack{ display: inline-block; width: 50px; height: 50px; background: black; } .black-green{ filter: invert(43%) sepia(96%) saturate(1237%) hue-rotate(88deg) brightness(128%) contrast(119%); } .black-red{ filter: invert(37%) sepia(93%) saturate(7471%) hue-rotate(356deg) brightness(91%) contrast(135%); } .black-blue{ filter: invert(12%) sepia(83%) saturate(5841%) hue-rotate(244deg) brightness(87%) contrast(153%); } .black-purple{ filter: invert(18%) sepia(98%) saturate(2657%) hue-rotate(289deg) brightness(121%) contrast(140%); } Black to any color: <br/> <div class="startAsBlack black-green"></div> <div class="startAsBlack black-red"></div> <div class="startAsBlack black-blue"></div> <div class="startAsBlack black-purple"></div>