关于css：img src SVG更改填充颜色

img src SVG changing the fill color

HTML

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

CSS

1
2
3

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

上面的svg加载并且本机是fill: #fff，但是当我使用上面的css尝试将其更改为黑色时，它并没有改变，这是我第一次使用SVG，我不确定为什么它不起作用。

相关讨论

您需要使SVG成为嵌入式SVG。您可以通过在图像中添加类svg来使用此脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

/*
* Replace all SVG images with inline SVG
*/
jQuery('img.svg').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');

jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');

// Add replaced image's ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image's classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}

// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');

// Check if the viewport is set, if the viewport is not set the SVG wont't scale.
if(!$svg.attr('viewBox') && $svg.attr('height') && $svg.attr('width')) {
$svg.attr('viewBox', '0 0 ' + $svg.attr('height') + ' ' + $svg.attr('width'))
}

// Replace image with new SVG
$img.replaceWith($svg);

}, 'xml');

});

然后，如果您这样做：

1
2
3

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

或者可能：

1
2
3

.logo-img path {
background-color: #000;
}

这可行！

小提琴：http://jsfiddle.net/wuSF7/462/

以上脚本的功劳：使用CSS和jQuery更改SVG图像的颜色，以及如何使用CSS更改SVG图像的颜色(jQuery SVG图像替换)？

相关讨论

如果要将此脚本用于多个脚本，则需要对脚本进行一些调整。 jsfiddle.net/wuSF7/31
嘿，这是坏屁股！这是一个非常酷的把戏。我不确定这有多"好"，但是，您知道我的意思吗？这感觉很hacky。可以这么说：确实很酷，很有创造力，只是不确定Id是否会这样做。但是，扮演魔鬼的拥护者，您是否想做一些事情，例如使用数据属性而不是src属性来防止资产两次加载？还是浏览器缓存会简单地返回第二个请求？嗯..很好奇。
而且要澄清的是，当我说我不会这样做时，因为我只会使用实际的嵌入式SVG。即使在必须查看该代码的静态HTML页面上，现代的构建系统通常也意味着您可能以某种方式"包含"了它并且不会弄脏您的代码。值得深思。
在我的项目中，加载页面时，img不会显示svg(甚至不会显示原始颜色)。页面加载完成后，将弹出重新着色的svg。好像我在图像样式中放置了display: none并在document.ready中添加了img.show()一样。将脚本作为外部JS加载到头部只会破坏脚本。
是否有人在IE9和IE9上遇到任何问题-在控制台中，我在jquery-1.8.2.js的行中收到错误HierarchyRequestError，行：6407，第6列。IE10和其他浏览器的运行就像是一种魅力。
当然，您始终可以选择所有SVG图像，而无需使用此选择器添加类：img[src$=".svg"]
这将导致浏览器两次加载图像。有没有jquery.get的方法吗？
@redanimalwar对不起，哥们，得想办法。 jQuery更容易...
@PraveenKumar你误会我了。我不是说我想要一个没有jQuery的版本。我说过，我不希望浏览器第二次从服务器重新加载图像。我不在乎它的jQuery是否。也许无需再次从服务器请求即可读取svg日期？
@redanimalwar Er ...对不起，我不明白。 :(
我的意思是上面的" svg数据"而不是" svg日期"。
@drmrbrewer是的，伙计...是的。 :) Lemme在我的原始帖子中添加源代码。好的？ :) ...到此为止。谢谢。
@redanimalwar不一定....虽然它将触发请求，但浏览器的缓存机制应防止再次检索文件，不是吗？
@redanimalwar似乎是从缓存中加载了第二个网络请求：i.imgur.com/o5gjY3O.png
任何避免XMLHttpRequest的方法都无法加载pathtosvg / name.svg。所请求的资源上没有Access-Control-Allow-Origin标头。因此，不允许访问原始域。
@glennyboy使用服务器端cURL或等效的file_get_contents。
@ Praveen-Kumar有上述任何示例吗？
@glennyboy在线兄弟有上百种东西！ :)尝试找到一个。
这是@Dave提供的工作链接：jsfiddle.net/wuSF7/2281
这个问题没有提及jQuery。我很想看看没有jQuery的答案。
@IanS是的，我有更多评论，但是制作一个跨浏览器的脚本很痛苦。我还在努力。
@IanS检查另一个答案：stackoverflow.com/a/43015413
在移动浏览器中不起作用
@jcarlosweb为我工作。经过Android，iOS测试...
那么，您必须对我的SVG做一些奇怪的事情，最后我将其转换为icomoon的Font，因为我厌倦了测试。感谢您的回答。

如果您的目标只是更改徽标的颜色，而不必使用CSS，则不要使用以前的答案所建议的javascript或jquery。

要精确回答原始问题，只需：

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

寻找fill: #fff并将其替换为fill: #000

例如，在文本编辑器中打开logo.svg时，它可能看起来像这样：

1
2
3
4

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

相关讨论

您可以将svg设置为蒙版。这样，设置背景颜色将充当您的填充颜色。

HTML

CSS

1
2
3
4
5

.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/

请注意，此方法不适用于Edge浏览器。您可以通过以下网站进行检查：https://caniuse.com/#search=mask

相关讨论

尝试纯CSS：

1
2
3
4
5
6

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

本文中的更多信息https://blog.union.io/code/2017/08/10/img-svg-fill/

相关讨论

2018年：如果您想要动态颜色，不想使用javascript且不需要嵌入式SVG，请使用CSS变量。适用于Chrome，Firefox和Safari。编辑：和边缘

1
2
3

在您的SVG中，将style="fill: #000"的所有实例替换为style="fill: var(--color_fill)"。

相关讨论

@Praveen的回答很可靠。

我无法在工作中响应它，所以我为此做了一个jquery悬停功能。

CSS

1
2
3

.svg path {
transition:0.3s all !important;
}

JS / jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 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');
});

相关讨论

该答案基于答案https://stackoverflow.com/a/24933495/3890888，但此处使用的脚本是纯JavaScript版本。

您需要使SVG成为嵌入式SVG。您可以通过在图像中添加类svg来使用此脚本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

/*
* 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);

});

});

然后，如果您这样做：

1
2
3

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

或者可能：

1
2
3

.logo-img path {
background-color: #000;
}

JSFiddle：http://jsfiddle.net/erxu0dzz/1/

相关讨论

为什么不使用您的一个或多个svg图像创建webfont，将webfont导入css，然后仅使用css color属性更改字形的颜色？
不需要JavaScript

相关讨论

首先，您必须将SVG注入HTML DOM。

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

这是使用SVGInject的一个最小示例：

1
2
3
4
5
6
7
8

加载图像后，onload="SVGInject(this)将触发注入，并且元素将由src属性中提供的SVG文件的内容替换。

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

可以隐藏SVG，直到完成注射。如果在加载期间已应用样式，则这很重要，否则会导致短暂的"未样式化内容闪烁"。

元素自动自动注入。如果您动态添加SVG，则不必担心再次调用注入函数。

如果将SVG多次注入，则将随机字符串添加到SVG中的每个ID，以避免在文档中多次具有相同的ID。

SVGInject是纯Javascript，可与所有支持SVG的浏览器一起使用。

免责声明：我是SVGInject的合著者

相关讨论

为了扩展@gringo答案，可以使用其他答案中描述的Javascript方法，但是需要用户下载不必要的图像文件，并且IMO会使代码膨胀。

我认为更好的方法是将所有1色矢量图形迁移到webfont文件。过去我曾经使用过Fort Awesome，它将您的SVG格式的自定义图标/图像以及您可能使用的任何第三方图标(Font Awesome，Bootstrap图标等)组合到单个webfont文件中的效果非常好用户必须下载。您也可以对其进行自定义，因此仅包含您正在使用的第三方图标。这减少了页面必须发出的请求的数量，并且使页面具有整体重量，特别是如果您已经包含任何第三方图标库的情况下。

如果您更喜欢面向开发人员的选项，则可以使用Google" npm svg webfont"，并使用最适合您的环境的节点模块之一。

一旦完成了这两个选项中的任何一个，就可以通过CSS轻松更改颜色，并且很可能在此过程中加快了网站的速度。

相关讨论

如果您只是在实色和黑白之间切换图像，则可以将一个选择器设置为：

{滤波器：无;}

另一个为：

1	{filter:grayscale(100%);}

由于SVG基本上是代码，因此只需要内容。我使用PHP获取内容，但是您可以使用任何内容。

1
2
3

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

然后，我将内容按原样打印在div容器中

1	<?php echo $content;?>

最终在CSS上为容器的SVG子项设置规则

1
2
3

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

我得到了带有材料图标SVG的结果：

Mozilla Firefox 59.0.2(64位)Linux

enter image description here

Google Chrome66.0.3359.181(正式版)(64位)Linux

enter image description here

Opera 53.0.2907.37 Linux

enter image description here

相关讨论

您遇到的主要问题是要从标记导入svg，这将隐藏SVG结构。

您需要将标记与结合使用才能获得所需的效果。为了使其正常工作，您需要在SVG文件中要使用的路径上指定id，然后才能从标记中检索它们。
尝试下面的片段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

.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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

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

知道这是一个老问题，但是最近我们遇到了同样的问题，我们从服务器端解决了这个问题。这是特定于php的答案，但我肯定其他环境也有类似的东西。
而不是使用img标签，而是从一开始就将svg呈现为svg。

1
2
3
4
5
6

public static function print_svg($file){
$iconfile = new \DOMDocument();
$iconfile->load($file);
$tag = $iconfile->saveHTML($iconfile->getElementsByTagName('svg')[0]);
return $tag;
}

现在，当您渲染文件时，您将获得完整的内嵌svg

这对于将PHP与要使用CSS操纵的.svg图像结合使用的人可能会有所帮助。

您无法使用CSS覆盖img标签内的属性。但是，当将svg源代码嵌入HTML时，您肯定可以。我想使用require_once函数解决此问题，其中包含一个.svg.php文件。这就像导入图像一样，但是您仍然可以使用CSS覆盖样式！

首先包含svg文件：

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

其中包括此图标，例如：

现在，我们可以使用CSS轻松更改填充颜色：

1
2
3

svg path {
fill: blue;
}

我首先尝试使用file_get_contents()解决此问题，但上述解决方案要快得多。

如果您可以访问JQuery，则可以通过以下方式扩展到Praveen的答案，以编程方式更改SVG中不同嵌套元素的颜色：

$('svg').find('path, text').css('fill', '#ffffff');

在find中，您可以提及需要更改颜色的不同元素。