img src SVG用CSS改变样式

超文本标记语言

<img src="logo.svg" alt="Logo" class="logo-img">

css

.logo-img path {
fill: #000;
}

上面的svg加载和原生的fill: #fff,但当我使用上面的css尝试将其更改为黑色时,它没有改变,这是我第一次使用svg,我不知道为什么它不工作。

1010297 次浏览

来自@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,因为之前的一些回答建议。

要精确地回答最初的问题,只需:

  1. 在文本编辑器中打开logo.svg

  2. 寻找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>

... 只需更改填充并保存。

为什么不创建一个webfont与您的svg图像或图像,导入webfont在css,然后只是改变字形的颜色使用css的颜色属性? 不需要javascript

这个答案是基于答案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设置为掩码。通过这种方式设置背景色将充当填充色。

超文本标记语言

<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/
中数:< /强> # EYZ0

请检查您的浏览器是否支持此功能: # EYZ0 < / p >

为了扩展@gringo的答案,在其他答案中描述的Javascript方法是有效的,但需要用户下载不必要的图像文件,而且在我看来,它会膨胀你的代码。

我认为更好的方法是将所有1色矢量图形迁移到webfont文件。我过去使用过堡太棒了,它可以很好地将您的自定义图标/ SVG格式的图像,以及您可能使用的任何第三方图标(Font Awesome, Bootstrap图标等)合并到一个用户必须下载的webfont文件中。你也可以自定义它,所以你只包括你正在使用的第三方图标。这减少了页面必须发出的请求数量,并且您的整体页面重量,特别是如果您已经包括任何第三方图标库。

如果您更喜欢面向开发的选项,则可以使用谷歌"npm svg webfont",并使用最适合您的环境的一个节点模块。

一旦你完成了这两个选项中的任何一个,那么你就可以很容易地通过CSS改变颜色,而且很可能,你已经在这个过程中加快了你的网站。

在您的案例中,主要问题是您从<img>标记导入svg,该标记将隐藏svg结构。

你需要使用<svg>标签和<use>标签来获得想要的效果。为了让它工作,您需要给您想要在SVG文件<path id='myName'...>中使用的路径一个id,然后能够从<use xlink:href="#myName"/>标记中检索它们。

.icon {
display: inline-block;
width: 2em;
height: 2em;
transition: .5s;
fill: currentColor;
stroke-width: 5;
}
.icon:hover {
fill: rgba(255,255,255,0);
stroke: black;
stroke-width: 2;
}


.red {
color: red;
}


.blue {
color: blue;
}
<svg width="0" height="0">
<defs>
<path id="home" d="M100 59.375l-18.75-18.75v-28.125h-12.5v15.625l-18.75-18.75-50 50v3.125h12.5v31.25h31.25v-18.75h12.5v18.75h31.25v-31.25h12.5z"/>
</svg>


  

<span class="icon red">
<svg viewbox="0 0 100 100">
<use xlink:href="#home"/>
</svg>
</span>
  

<span class="icon blue">
<svg viewbox="0 0 100 100">
<use xlink:href="#home"/>
</svg>
</span>

注意,如果您想从外部来源加载SVG(而不是将其嵌入到HTML中),则可以将任何URL放在片段#之前。另外,通常不需要在CSS中指定填充。最好考虑在SVG本身中使用fill:"currentColor"。相应元素的CSS颜色值将被使用到位。

因为SVG基本上是代码,所以您只需要内容。我使用PHP来获取内容,但您可以使用任何您想要的内容。

<?php
$content    = file_get_contents($pathToSVG);
?>

然后,我已经打印内容“是”在一个div容器

<div class="fill-class"><?php echo $content;?></div>

最后将规则设置为CSS上的容器的SVG子元素

.fill-class > svg {
fill: orange;
}

我用SVG材质图标得到了这个结果:

Firefox 59.0.2(64位)Linux

enter image description here

谷歌Chrome66.0.3359.181 (Build official)(64位)Linux

enter image description here

Opera 53.0.2907.37 Linux

enter image description here

如果你想要一个动态的颜色,不想使用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)"

尝试纯CSS:

.logo-img {
/* to black */
filter: invert(1);
/* or to blue */
filter: invert(0.5) sepia(1) saturate(5) hue-rotate(175deg);
}

更多信息在这篇文章https://blog.union.io/code/2017/08/10/img-svg-fill/

首先必须将SVG注入到HTML DOM中。

有一个名为SVGInject的开源库可以为您完成这项工作。它使用onload属性来触发注入。

下面是一个使用SVGInject的最小示例:

<html>
<head>
<script src="svg-inject.min.js"></script>
</head>
<body>
<img src="image.svg" onload="SVGInject(this)" />
</body>
</html>

图像加载后,onload="SVGInject(this)将触发注入,<img>元素将被src属性中提供的SVG文件的内容所取代。

它解决了SVG注入的几个问题:

  1. svg可以隐藏,直到注射完成。如果在加载时已经应用了样式,这就很重要,否则会导致简短的“无样式内容闪光”。

  2. <img>元素自动注入自身。如果动态添加svg,就不必担心再次调用注入函数。

  3. 向SVG中的每个ID添加一个随机字符串,以避免在多次注入SVG时在文档中多次使用相同的ID。

SVGInject是纯Javascript,适用于所有支持SVG的浏览器。

声明:我是SVGInject的合著者

知道这是一个老问题,但最近我们遇到了同样的问题,我们从服务器端解决了它。这是一个php特定的答案,但我肯定其他envs有类似的东西。 而不是使用img标记,您从一开始就将SVG呈现为SVG
public static function print_svg($file){
$iconfile = new \DOMDocument();
$iconfile->load($file);
$tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
return $tag;
}

现在呈现文件时,您将得到完整的内联SVG

如果你只是在真实颜色和黑白之间切换图像,你可以设置一个选择器为:

{过滤器:没有;}

另一个是:

{filter:grayscale(100%);}

这对于想要使用CSS操作的PHP.svg图像组合使用的人可能有帮助。

你不能用CSS覆盖img标签内的属性。但是当svg源代码嵌入到HTML中时,你当然可以。我喜欢用require_once函数来解决这个问题,其中包括.svg.php文件。这就像导入一个图像,但你仍然可以用CSS覆盖样式!

首先包含svg文件:

<?php require_once( '/assets/images/my-icon.svg.php' ); ?>

它包括这个图标,例如:

<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>

现在我们可以像这样用CSS简单地改变填充颜色:

svg path {
fill: blue;
}

我首先尝试用file_get_contents()来解决这个问题,但上面的解决方案要快得多。

简单. .

你可以使用下面的代码:

<svg class="logo">
<use xlink:href="../../static/icons/logo.svg#Capa_1"></use>
</svg>

首先指定svg的路径,然后写入它的ID,在本例中为“Capa_1”。您可以通过在任何编辑器中打开svg来获得它的ID。

在css中:

.logo {
fill: red;
}

使用滤镜转换为任何颜色。

我最近发现了这个解决方案,希望有人可以使用它。 由于该解决方案使用过滤器,它可以用于任何类型的图像。不仅仅是svg。< / p >

如果你有一张单色图像,你只是想改变它的颜色,你可以在一些滤镜的帮助下做到这一点。当然,它也适用于多色图像,但你不能针对特定的颜色。只有整个图像。

过滤器来自如何将黑色转换为任何给定的颜色仅使用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>

在代码编辑器中打开SVG图标,并在path标记后添加一个类:

<path class'colorToChange' ...

你可以向svg添加class,并像这样改变颜色:

< a href = " https://codepen。io/hmzajmal/pen/ZEGvWYa" rel="nofollow noreferrer">codepen

编辑您的SVG文件,将fill="currentColor"添加到SVG标记,并确保从文件中删除任何其他填充属性。

例如:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 139.435269383854" id="img" fill="currentColor">...
</svg>

注意,currentColor是一个关键字(不是使用的固定颜色)。

在此之后,您可以使用CSS更改颜色,通过设置元素的color属性或从它的父元素。

例子:

.div-with-svg-inside {
color: red;
}

我忘了说,你必须这样插入SVG:

<svg>
<use xlink:href='/assets/file.svg#img' href="/assets/file.svg#img"></use>
</svg>

如果image来自某个变量,那么

<svg>
<use [attr.xlink:href]="somevariable + '#img'" [attr.href]="somevariable + '#img'"></use>
</svg>
Note that `#img` is the id of the `svg` tag inside svg file. Also note `xlink:href` has been deprecated instead you should use `href` or use can use both to support older browser versions.


Another way of doing it: [https://css-tricks.com/cascading-svg-fill-color/][1]




[1]: https://css-tricks.com/cascading-svg-fill-color/

直接到svg填充css将不工作,你可以使用如下

<style>
svg path {
fill: red;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" width="20.666" height="59.084" viewBox="0 0 20.666 59.084"><g transform="translate(-639.749 -3139)"><path d="M648.536,3173.876c0-2.875-1.725-3.8-3.471-3.8-1.683,0-3.49.9-3.49,3.8,0,3,1.786,3.8,3.49,3.8C646.811,3177.676,648.536,3176.769,648.536,3173.876Zm-3.471,2.341c-.883,0-1.437-.513-1.437-2.341,0-1.971.615-2.381,1.437-2.381.862,0,1.438.349,1.438,2.381,0,1.907-.616,2.339-1.438,2.339Z" fill="#142312"/><path d="M653.471,3170.076a1.565,1.565,0,0,0-1.416.9l-6.558,13.888h1.2a1.565,1.565,0,0,0,1.416-.9l6.559-13.887Z" fill="#142312"/><path d="M655.107,3177.263c-1.684,0-3.471.9-3.471,3.8,0,3,1.766,3.8,3.471,3.8,1.745,0,3.49-.9,3.49-3.8C658.6,3178.186,656.851,3177.263,655.107,3177.263Zm0,6.139c-.884,0-1.438-.514-1.438-2.34,0-1.972.617-2.381,1.438-2.381.862,0,1.437.349,1.437,2.381,0,1.909-.616,2.34-1.437,2.34Z" fill="#142312"/><path d="M656.263,3159.023l-1.49-14.063a1.35,1.35,0,0,0,.329-.293,1.319,1.319,0,0,0,.268-1.123l-.753-3.49a1.328,1.328,0,0,0-1.306-1.054h-6.448a1.336,1.336,0,0,0-1.311,1.068l-.71,3.493a1.344,1.344,0,0,0,.276,1.112,1.532,1.532,0,0,0,.283.262l-1.489,14.087c-1.7,1.727-4.153,4.871-4.153,8.638v28.924a1.339,1.339,0,0,0,1.168,1.49,1.357,1.357,0,0,0,.17.01h17.981a1.366,1.366,0,0,0,1.337-1.366v-29.059C660.414,3163.893,657.963,3160.749,656.263,3159.023Zm-8.307-17.349h4.274l.176.815H647.79Zm9.785,43.634v10.1H642.434v-17.253a4.728,4.728,0,0,1-2.028-4.284,4.661,4.661,0,0,1,2.028-4.215v-2c0-3.162,2.581-5.986,3.687-7.059a1.356,1.356,0,0,0,.4-.819l1.542-14.614H652.1l1.545,14.618a1.362,1.362,0,0,0,.4.819c1.109,1.072,3.688,3.9,3.688,7.059v9.153a5.457,5.457,0,0,1,0,8.5Z" fill="#142312"/></g></svg>

这对我很有效

对于我来说,我的svg在使用img和svg时看起来有所不同。所以我的解决方案将img转换为csv,在内部更改样式并返回img(虽然它需要更多的工作),我相信"blob"也有更好的兼容性比点赞的答案使用“掩码”。

  let img = yourimgs[0];
if (img.src.includes(".svg")) {
var ajax = new XMLHttpRequest();
ajax.open("GET", img.src, true);
ajax.send();
ajax.onload = function (e) {
     

svg = e.target.responseText;


     

svgText = "";
//change your svg-string as youd like, for example
// replacing the hex color between "{fill:" and ";"
idx = svg.indexOf("{fill:");
substr = svg.substr(idx + 6);
str1 = svg.substr(0, idx + 6);
str2 = substr.substr(substr.indexOf(";"));
svgText = str1 + "#ff0000" + str2;
      



let blob = new Blob([svgText], { type: "image/svg+xml" });
let url = URL.createObjectURL(blob);
let image = document.createElement("img");
image.src = url;
image.addEventListener("load", () => URL.revokeObjectURL(url), {
once: true,
});
img.replaceWith(image);
};
}
我建议选择你的颜色,然后去这支笔 < a href = " https://codepen。io /宗介/钢笔/ Pjoqqp noreferrer“rel = > https://codepen.io/sosuke/pen/Pjoqqp < / > 它将十六进制转换为css过滤器,例如:#64D7D6

平等的

filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);

最后一个片段

.filterit{
width:270px;
filter: invert(88%) sepia(21%) saturate(935%) hue-rotate(123deg) brightness(85%) contrast(97%);
}
<img src="https://www.flaticon.com/svg/static/icons/svg/1389/1389029.svg"
class="filterit


/>

为什么不使用CSS的filter属性来操作:hover或任何其他状态的颜色呢?我发现它可以将SVG图像转换为img标签。至少,它在2020年几乎得到了全面支持。在我看来这是最简单的解决办法。唯一需要注意的是,为了找到目标颜色,必须调整滤镜属性。但是你也有这个非常有用的工具

因此,您必须将SVG作为内联HTML使用。

说这是你的logo.svg代码(当你在textEditor上打开它):

Logo.SVG

<svg width="139" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Note that I've Added Class Attribute 'logo-img' Here -->
<g transform="translate(-22 -45)" fill="none" fill-rule="evenodd">
<path
d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z"
fill="#00000" />
</g>
</svg>

添加你想要的Class/ID到它(我添加了'logo-img'):

编辑Svg

<svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Note that I've Added Class Attribute 'logo-img' Here -->
...
</svg>

现在应用你的Css规则:

CSS

.logo-img path {
fill: #000;
}

  • 通过这种方式,您可以对用户的操作(悬停,选中,…)进行动画化。

反对

  • 你的HTML文件会一团糟。

这里是一个堆栈片段

<style>
body {
display: flex;
justify-content: center;
}
.logo-img path {
transition: .5s all linear;
}
.logo-img path {
fill: coral;
}
.logo-img:hover path{
fill: darkblue;
}
        

</style>
<!DOCTYPE html>
<html lang="en">


<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
    

</head>


<body>
<svg class="logo-img" width="139" height="100" xmlns="http://www.w3.org/2000/svg">
<!-- Note that I've Added Class Attribute 'logo-img' Here -->
<g transform="translate(-22 -45)" fill="none" fill-rule="evenodd">
<path
d="M158.023 48.118a7.625 7.625 0 01-.266 10.78l-88.11 83.875a7.625 7.625 0 01-10.995-.5l-33.89-38.712a7.625 7.625 0 0111.475-10.045l28.653 32.73 82.353-78.394a7.625 7.625 0 0110.78.266z"
fill="#00000" />
</g>
</svg>
</body>


</html>

如果你的形状总是一种纯色,而且你有两个以上的纯色,你可以使用Fontello,用你自己的一系列自定义SVG形状制作一个自定义图标字体。然后你可以单独用CSS设置/动画它们的大小和颜色。

对于这个问题的所有可能的用例,这是一个需要考虑的基本范例。我在许多项目中使用过它。无论如何,如果你没有听说过Fontello,你需要去了解一下。如果你知道一个类似的更好的解决方案,我很想知道。

可能的失败:

  1. 图标/形状字体是已知的混乱的屏幕阅读器,所以可能需要一些处理。

  2. Fontello在导入形状时可能很挑剔,在创建和导出它们时可能需要一些尝试和错误。 避免任何和所有分组,并使用只有单个非嵌套复合形状

我只想改变特定的路径和/或颜色,甚至不同的路径上色。此外,在我的情况下,一些CSS被应用到img标签直接,因此我想让它是原始的img元素,而不是混乱的定位和对齐。

多亏了https://stackoverflow.com/a/43015413/1444589这个答案的启发,这对我来说很管用:

let img = document.querySelector('img[class^="YourClassName"]');
let imgURL = img.src;


fetch(imgURL)
.then(response => response.text())
.then(text => {
let parser = new DOMParser();
let xmlDoc = parser.parseFromString(text, 'text/xml');
let svg = xmlDoc.getElementsByTagName('svg')[0];
let paths = xmlDoc.getElementsByTagName('path');


// access individual path elements directly
let leftShape = paths[0];
leftShape.setAttribute('fill', '#4F4F4F');


// or find specific color
const pathsArr = Array.from(paths);
let skirtShape = pathsArr.find(path => path.getAttribute('fill') === '#F038A5');
skirtShape.setAttribute('fill', '#0078D6');


// Replace old SVG with colorized SVG
// positioning and alignment is left untouched
let base64Str = btoa(new XMLSerializer().serializeToString(svg));
img.src = 'data:image/svg+xml;base64, ' + base64Str;
});