简单. .

你可以使用下面的代码:

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

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

在css中:

.logo {
  fill: red;
}

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

{过滤器:没有;}

另一个是:

{filter:grayscale(100%);}

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

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

我只想改变特定的路径和/或颜色，甚至不同的路径上色。此外，在我的情况下，一些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;
  });

直接到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>

这对我很有效

我建议你选好颜色，去这支笔 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 />