Javascript 如何在不使用SVG文件本身ID的情况下更改SVG颜色？

刚开始和SVG合作，我遇到了一个问题。基本上，我使用名词projectapi pro version（）将图标刮取为SVG。现在，我将SVG保存在本地文件夹中。我想能够改变图标的颜色（现在他们下载为黑色，我想改变颜色）。我通过标记加载SVG，并引用保存SVG的文件夹。我知道使用vanilla JS（使用document.getElementById（'svgObject'）.contentDocument，然后使用唯一id访问内部文档）更改颜色非常简单。问题是我保存的SVG没有任何ID，我也不知道如何给他们一个ID。现在，我正在循环浏览文件夹并在网页中显示文件夹内容。这一切都很好，但我想不出如何改变颜色

---

基本上，我只希望文件夹中的所有图标都设置为不同的颜色（例如，它们都可以设置为“红色”。它们不需要每个都有不同的颜色）。如何在不指定实际ID的情况下实现这一点（因为SVG在下载时不包含ID），或者如何向SVG标记本身添加ID？

您可以给SVG一个

类而不是
ID
&使用javascript的
GetElementsByCassName
设置颜色

这篇Mozilla文章解释了：

假设您的页面上有一堆
svg
s，并且希望将每个svg的颜色更改为相同的颜色，则可以执行以下操作：

函数更改颜色（）{
const svgs=document.getElementsByTagName（'svg'）
for（设i=0；i

这将遍历页面上的每个
svg
，并将其
fill
属性设置为
red

本质上，这相当于这样做：


...

下面是一个快速演示：





或者，如果您正在使用类似于
img
标记的东西将
svg
加载到页面上，那么使用
object
可以让您执行与上面相同的操作

假设您的
html
如下所示：



那么

函数更改颜色（）{
const objects=document.getElementsByTagName（'对象'）
for（设i=0；i
实现这一点的最佳方法是使用svg元素的
填充
属性。现在，你可以用两种方法解决这个问题

方法1:
使用
img
这样的标签
。在这种情况下，您需要直接编辑文件，也就是说，它应该反映您引用svg的任何地方

方法2:
您可以使用svg作为内联，如下所示。这种方法的优点是，如果您有相同svg的不同实例，那么这就是解决方法。另一方面，如果您的svg在整个应用程序中保持不变，那么这就违反了规则


svg{
最大宽度：200px；
}
如果您不介意svg都是一种颜色，可以将svg的
fill
属性设置为
currentcolor
。然后它将采用它所在元素的颜色


#span1{
颜色：红色；
}
#span2{
颜色：蓝色；
}
#span3{
颜色：绿色；
}

HTML5标志
HTML5标志
HTML5标志
一个选项是使用svg作为图像（或者作为对象，如果您愿意）和过滤器来更改颜色


#图像{过滤器：反转（27%）深褐色（51%）饱和（2878%）色调旋转（346度）亮度（104%）对比度（97%）}
您是否尝试过使用
填充属性？您是否可以使用
css
并执行
svg{color:red}
？您希望所有实例的颜色都更改，还是仅在某些页面上更改？嘿，感谢您这么快地回答！：）@goto1我确实需要使用fill属性，但我不确定如何指定SVGitself@NidhinJoseph所有实例！谢谢哦，天哪，你在这里救了我！！非常感谢你，工作得很有魅力