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

Question

使用 SVG 的新手，我遇到了一个问题。基本上，我使用 Noun Project API 专业版 ( https://api.thenounproject.com/ ) 将图标抓取为 SVG。现在，我将 SVG 保存在本地文件夹中。我希望能够更改图标的颜色(现在他们下载为黑色，我想更改颜色)。我正在通过标签加载 SVG，并引用保存 SVG 的文件夹。我知道使用普通 JS 更改颜色非常简单(使用 document.getElementById('svgObject').contentDocument，然后使用唯一 ID 访问内部文档)。问题是我保存的 SVG 没有任何 ID，我不知道如何给它们一个 ID。现在，我正在遍历文件夹并在网页中显示文件夹内容。一切正常，但我无法弄清楚如何更改颜色。

基本上，我只想将文件夹中的所有图标都设置为不同的颜色(例如，它们可以全部设置为“红色”。它们不需要每个都具有不同的颜色)。如何在不指定实际 ID 的情况下执行此操作(因为 SVG 在下载时不包含 ID)，或者如何将 ID 添加到 SVG 标签本身？

Answer 1

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

function changeSvgColors() {
  const svgs = document.getElementsByTagName('svg')

  for (let i = 0; i < svgs.length; i++) {
    svgs[i].setAttribute('fill', 'red')
  }
}

这将遍历页面上的每个 svg 并将它们的 fill 属性设置为 red。

本质上，这等同于这样做:

<svg viewBox="0 0 512 512" fill="red">
  ...
</svg>

这是一个快速演示:

• > JSFiddle

---

或者，如果您使用类似 img 标签的东西将您的 svg 加载到您的页面上，则使用 object 会让你做和上面一样的事情。

假设您的 html 如下所示:

<div>
  <object
    data="http://localhost:5000/image.svg"
    type="image/svg+xml"
  ></object>
</div>

然后，

function changeSvgColors() {
  const objects = document.getElementsByTagName('object')

  for (let i = 0; i < objects.length; i++) {
    const object = objects[i]
    const svg = object.contentDocument.rootElement

    svg.setAttribute('fill', 'red')
  }
}