用ChatGPT解决这个技术问题 Extra ChatGPT

img src SVG 用 CSS 改变样式

html 

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

css 

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

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

你不能像那样影响 SVG 图像……只有内联 SVG 元素
How to change color of SVG image using CSS (jQuery SVG image replacement)? 的可能重复项
在这里查看我的答案以使用 SVG 和 CSS 的内容。 stackoverflow.com/questions/11978995/…
css-tricks.com/change-color-of-svg-on-hover
如果我使用“填充：红色”，我认为它有效。 .logo-img { 填充：#000; } 试试看

A
André Kuhlmann

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

因此，除了内部网站之外的任何东西都无法使用。
截至 2016 年 5 月 29 日，全球支持率为 89%。
对于像 here 中描述的情况，这是一个了不起的解决方案，在 css 中使用除数据 uri 之外的任何东西都会有点痛苦。谢谢！
它不工作。它说 mask 是 invalid property value。我正在用 chrome 测试这个。
这很好用！我在 div 中添加了 <img src="logo.svg" style="opacity:0" /> 以获得正确的 div 尺寸。
R
Rowe Morehouse

如果您的目标只是更改徽标的颜色，并且您不一定需要使用 CSS，那么请不要像之前的一些答案所建议的那样使用 javascript 或 jquery。

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

在文本编辑器中打开您的 logo.svg。查找填充：#fff 并将其替换为填充：#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>

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

...如果没有“填充”，您可以将其添加到 path 或 circle 项，如 <path fill="#777777" d="m129.774,74.409c-5.523,...。
如果我的标志在页眉有一种颜色，在页脚有另一种颜色怎么办？
您也可以使用 fill="currentColor"，然后在父元素 css-tricks.com/cascading-svg-fill-color 上使用 color
这显然是可能的，并不是一个真正有用的答案。
@Timmmm currentColor 方式实际上非常好。
F
Feri

尝试纯 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/

最近我的一次尝试在 Edge 上获得了与其他浏览器不同的颜色。
这适用于大多数浏览器，但我在使用 IOS-Safari 浏览器时遇到了一些问题。
如何找到给定颜色代码的所有四个值？
这行得通。使用颜色代码生成过滤器 codepen.io/sosuke/pen/…
@funky-nd 不，我从未见过由于 css tbh 导致的性能问题。
n
northamerican

如果您想要动态颜色，不想使用 javascript 并且不想要内联 SVG，请使用 CSS 变量。适用于 Chrome、Firefox 和 Safari。编辑：和边缘 

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

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

在 SVG 2 中似乎是 deprecated
@northamerican - 作为“证明”的其他stackoverflow答案的链接是无关紧要的。任何人都可以在这个平台上写任何东西。 MDN："This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped"
似乎 xlink:href 已被弃用，取而代之的是 href。所以这可能仍然有效。
@BenjaminIntal href 在 chrome 中似乎不适合我
看起来很有希望，但是，可惜它没有加载图片。控制台中也没有错误消息。我正在使用 Firefox 78.4 esr。
W
Waruyama

您首先必须将 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 注入的几个问题：

SVG 可以隐藏，直到注入完成。如果在加载期间已经应用了样式，这很重要，否则会导致短暂的“无样式内容闪烁”。 元素会自动注入自己。如果动态添加 SVG，则不必担心再次调用注入函数。将随机字符串添加到 SVG 中的每个 ID，以避免在多次注入 SVG 时在文档中多次使用相同的 ID。

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

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

这是最直接的答案。我在 Chrome、Firefox 和 Edge 中对其进行了测试，并且运行良好。
这是一个有效的解决方案，但我认为“最直接”是一个很大的延伸。
J
Jehad Ahmad Jaghoub

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

平等的 

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

最后的片段

.filterit{ 宽度：270px;滤镜：反转（88%）棕褐色（21%）饱和（935%）色调旋转（123度）亮度（85%）对比度（97%）； }

在我无法更改标记的情况下，这确实很有帮助。
即使使用亮度（0）饱和（100％），结果也几乎不是我想要的，所以虽然为此付出了很多工作，但结果与应有的结果相差甚远。
@e11world SVG 文件本身不应该有颜色
我只是想反转我的黑暗主题，这正是我想要的。谢谢
M
Modesto

编辑您的 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 是 svg 文件中 svg 标记的 ID。

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

xlink:href 已弃用，不应使用 developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
需要更改填充：红色而不是颜色 CSS 属性。
C
Community

此答案基于答案 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，那么我们需要将 fetch 块放入 IIFE。
伟大的！与 ES6 配合得很好。如果您不关心 IE 9，您甚至可以使用：parser.parseFromString(text, "image/svg+xml");
不适用于 iOS 9.3.5 上的 UIWebView。我认为这可能是由于使用了在 10.1 (developer.mozilla.org/en-US/docs/Web/API/Fetch_API) 中添加到 Safari 的 fetch。上面的 jQuery 版本确实有效。
J
JasperZelf

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

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

如果你有一个单色图像，你只想改变它的颜色，你可以借助一些过滤器来做到这一点。当然，它也适用于多色图像，但您不能针对特定颜色。只有整个图像。

过滤器来自 How to transform black into any given color using only CSS filters 中建议的脚本。如果要将白色更改为任何颜色，可以调整每个过滤器中的反转值。

.startAsBlack{ 显示：内联块；宽度：50px；高度：50px；背景：黑色； } .black-green{ 滤镜：反转（43%）棕褐色（96%）饱和（1237%）色调旋转（88度）亮度（128%）对比度（119%）； } .black-red{ 滤镜：反转（37%）棕褐色（93%）饱和（7471%）色调旋转（356deg）亮度（91%）对比度（135%）； } .black-blue{ 滤镜：反转（12%）棕褐色（83%）饱和（5841%）色调旋转（244deg）亮度（87%）对比度（153%）； } .black-purple{ 滤镜：反转（18%）棕褐色（98%）饱和（2657%）色调旋转（289deg）亮度（121%）对比度（140%）； } 黑色到任何颜色：

这个 filter 有效！如果您有 HEX 颜色 并希望从中生成过滤器颜色，请使用 CSS filter generator from Codepen。生成的滤镜颜色适用于最初为黑色的颜色。如果您有一个最初是白色的颜色，您可以增加生成的过滤颜色的亮度以实现目标颜色。
g
gringo

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

如果你的 svg 有几个不同颜色的元素，这个解决方案会变得非常 hacky（插入几个元素）。
@kakaja 这仅适用于其中具有 1 种颜色的矢量图像的解决方案。有关更多详细信息，请参阅 bpulecio 的答案
因为图标不是文本。字体用于文本。 Svgs 用于图标。
@LazarLjubenović - 从技术上讲，文本是由符号字符组成的，图标也是符号，所以这就是为什么许多人使用图标字体没有问题。这就像创建“另一种”文本语言一样。普通话使用“图标”而不是字母，在人类中使用图标作为“文本”并不少见
虽然这听起来是一个有趣的解决方案，但我真的建议将答案详细说明为更像“如何”而不是“为什么不”
s
sleepDrifter

@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');
});
如果 SVG 一开始是内联的，这难道不可行吗？
是的——但是如果您正在处理许多 SVG 文件或定期更新它们，那么管理起来会很痛苦。
H
Hamza Jamal

简单的..

您可以使用以下代码： 

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

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

在 CSS 中： 

.logo {
  fill: red;
}
kabrice，您可以使用此代码 codepen.io/hmzajmal/pen/ZEGvWYa
这应该被标记为解决方案。添加您要链接的 svg 的 id (#...) 非常重要。
tbh 我找不到 svg 的 id
w
wcb1

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

{过滤器：无；}

另一个为： 

{filter:grayscale(100%);}
B
Benjamin

由于 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

https://i.stack.imgur.com/46V0s.jpg

Google Chrome66.0.3359.181 (Build 官方) (64 bits) Linux

https://i.stack.imgur.com/432FP.jpg

Opera 53.0.2907.37 Linux

https://i.stack.imgur.com/JUJAe.jpg

我不这样做的原因是这会阻止浏览器缓存 SVG。另一种方法是使用此处其他一些答案中提到的 SVG 注入器。 SVG 文件仍然会被浏览器缓存，并且注入的 SVG 仍然可以使用 CSS 设置样式。但我不会对你投反对票。
我明白，但无论如何，没有提到缓存。最佳答案有 JavaScript 代码，每次都可以通过标题过期操作或在文件名链接后强制哈希来重新加载（或不）。谢谢不要投反对票，但我仍然相信我的答案解决了使用 CSS 填充属性更改 SVG 的问题。
b
bpulecio

为了扩展@gringo的答案，其他答案中描述的Javascript方法有效，但需要用户下载不必要的图像文件，而IMO，它会使您的代码膨胀。

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

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

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

你应该试试 SVG sprites。根据我的经验，网络字体在浏览器版本之间存在随机问题。试试这个：fontastic.me - 但使用 SVG sprite 版本 - 看看你的想法。 :)
F
Flavien Volken

您的情况的主要问题是您从 <img> 标记导入 svg，这将隐藏 SVG 结构。

您需要将 <svg> 标记与 <use> 结合使用才能获得所需的效果。要使其工作，您需要将 id 指定给要在 SVG 文件 <path id='myName'...> 中使用的路径，然后才能从 <use xlink:href="#myName"/> 标记中检索它们。试试下面的截图。

.icon { 显示：内联块；宽度：2em；高度：2em；过渡：0.5s；填充：当前颜色；笔画宽度：5； } .icon:hover { 填充：rgba(255,255,255,0);中风：黑色；笔画宽度：2； } .red { 颜色：红色； } .blue { 颜色：蓝色； } <使用 xlink:href="#home"/>

请注意，如果您想从 external source 加载 SVG（而不是将其嵌入到 HTML 中），您可以在片段 # 之前放置任何 URL。此外，通常您不会在 CSS 中指定填充。最好考虑在 SVG 本身中使用 fill:"currentColor"。相应元素的 CSS 颜色值将在适当位置使用。

F
Floris

这对于将 PHP 与 .svg 图像结合使用的人可能会有所帮助，他们希望通过 CSS 进行操作。

您不能使用 CSS 覆盖 img 标签内的属性。但是当 svg 源代码嵌入到 HTML 中时，您肯定可以。我喜欢使用包含 .svg.php 文件的 require_once 函数来解决此问题。这就像导入图像，但您仍然可以使用 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() 解决这个问题，但上面的解决方案要快得多。

require_once() 比 file_get_contents() 快怎么办？因为它是一个纯粹的本地电话？
是的。据我所知，file_get_contents() 做了一个 GET 请求，并且 require_once 将它包含在本地。
H
Hamza Jamal

在代码编辑器中打开 svg 图标并在路径标记后添加一个类： 

<path class'colorToChange' ...

您可以将类添加到 svg 并更改颜色，如下所示：

codepen

n
nechemya ungar

知道这是一个老问题，但最近我们遇到了同样的问题，我们从服务器端解决了它。这是一个特定于 php 的答案，但我很肯定其他环境也有类似的东西。而不是使用 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

S
Servus

对我来说，我的 svg 在将它们作为 img 和 svg 时看起来不同。所以我的解决方案将 img 转换为 csv，在内部更改样式并返回到 img（尽管它需要更多的工作），我相信“blob”也比使用“mask”的upvoted 答案具有更好的兼容性。 

  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);
    };
  }
H
Hans

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

为此，您必须将 SVG 用作内联 HTML。

说这是你的 logo.svg 代码（当你在 textEditor 上打开它时）：

标志.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>

向其中添加您想要的类/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 文件将是一团糟。

这是一个堆栈片段

<样式> 正文 { 显示：弹性；证明内容：中心； } .logo-img 路径 { 过渡：.5s 所有线性； } .logo-img 路径 { 填充：珊瑚； } .logo-img: 悬停路径{ 填充：深蓝色； } 文档

J
Juan Manuel Linares

为什么不直接使用 CSS 的 filter 属性来操作 :hover 上的颜色或任何其他状态？我发现它可以将 SVG 图像转换为 img 标签。至少，它在 2020 年几乎得到完全支持。它对我来说是最简单的解决方案。唯一需要注意的是必须调整过滤器属性才能找到目标颜色。但是你也有这个非常有用的tool。

B
BBaysinger

如果您的形状始终是一种纯色并且您有多个，您可以使用 Fontello 并使用一系列您自己的自定义 SVG 形状制作自定义图标字体。然后，您可以单独使用 CSS 设置/动画所有它们的大小和颜色。

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

可能的缺点：

众所周知，图标/形状字体会干扰屏幕阅读器，因此可能需要一些处理。 Fontello 对导入形状可能很挑剔，并且在创作和导出它们时可能需要一些试验和错误。避免任何和所有分组，并且仅使用单个非嵌套复合形状。

J
Jayant Patil

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

这对我有用

关注公众号,不定期副业成功案例分享
关注公众号

不定期副业成功案例分享

想领先一步获取最新的外包任务吗？

立即订阅

HuntsBot(狩猎机器人)，一站式外包任务、远程工作、产品创意分享与订阅平台，支持钉钉、飞书、企业微信、邮箱、Telegram机器人订阅。平台会以及时、稳定、可靠的技术把外包任务需求、远程工作机会、产品创意等推送给每一位订阅的用户。

简体中文 English

平台

支持

联系我们

在使用过程中有任何问题或建议，可以通过以下方式联系我们：

微信公众号: 火星来客

Email: huntsbot@xinbeitime.com

Copyright© 2022-2023 www.huntsbot.com 浙ICP备2022000860号-4 All Rights Reserved.