img src SVG改变填充颜色

Question

HTML

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

CSS

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

上面的svg加载并且是原生的,fill: #fff但是当我使用上面css的内容尝试将其更改为黑色时它不会改变,这是我第一次玩SVG而且我不确定它为什么不起作用.

Answer 1

如果你的目标只是改变徽标的颜色,并且你不一定需要使用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>

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

Answer 2

您可以将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/

请注意,此方法不适用于Edge浏览器.您可以访问以下网站查看:https://caniuse.com/#search=mask

Answer 3

尝试纯CSS:

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

Answer 4

2018:如果你想要一个动态颜色,不想使用javascript而不想要内联SVG,请使用CSS变量.适用于Chrome,Firefox和Safari.编辑:和边缘

<svg>
    <use xlink:href="logo.svg" style="--color_fill: #000;"></use>
</svg>

在你的SVG,替换的任何实例style="fill: #000"用style="fill: var(--color_fill)".

Answer 5

编辑您的 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'></use>
      </svg>

请注意，这#img是svgsvg 文件中标签的 ID 。

另一种方法：https : //css-tricks.com/cascading-svg-fill-color/

Answer 6

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

Answer 7

这个答案基于答案/sf/answers/1745344681/,但在那里使用的脚本是纯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/

Answer 8

使用过滤器转换为任何颜色。

我最近找到了这个解决方案，希望有人可以使用它。由于该解决方案使用过滤器，因此它可以用于任何类型的图像。不仅仅是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>

Answer 9

首先,您必须将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被多次注入,则向SVG中的每个ID添加随机字符串,以避免在文档中多次使用相同的ID.

SVGInject是简单的Javascript,适用于所有支持SVG的浏览器.

免责声明:我是SVGInject的合着者

Answer 10

简单的..

您可以使用此代码：

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

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

在 CSS 中：

.logo {
  fill: red;
}

Answer 11

为什么不用svg图像或图像创建webfont,在css中导入webfont然后只使用css颜色属性更改字形的颜色？不需要JavaScript

Answer 12

我建议选择您的颜色，然后转到这支笔 https://codepen.io/sosuke/pen/Pjoqqp 它会将 HEX 转换为 css 过滤器，例如：#64D7D6

平等的

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

最后的片段

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%);
}

Answer 13

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

{过滤器：无；}

另一个为：

{filter:grayscale(100%);}

Answer 14

由于 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 得到了这个结果：

Mozilla Firefox 59.0.2（64 位）Linux

Google Chrome66.0.3359.181（官方版本）（64位）Linux

歌剧 53.0.2907.37 Linux