我们可以使用 Javascript 更改加载的 SVG 文件的颜色吗?

Can we change the colour of a loaded SVG files using Javascript?

本文关键字：SVG 文件 颜色 加载 可以使 Javascript 我们      更新时间：2023-09-26

我们可以在哪里更改SVG文件的颜色吗？

例如，加载树 SVG 并将叶子/叶子的颜色更改为绿色，将树皮更改为棕色。

我们需要为这部分创建画布/编辑器。

我是Javascript的新手，我已经在互联网上搜索以更改SVG文件。似乎无法更改加载的 SVG 文件。

人们可以帮助提供一些关于如何通过创建画布/编辑器使用 Javascript 修改 SVG 元素的指导吗？

在支持 SVG 的浏览器中，您可以像处理常规 html 元素一样操作 SVG 元素。例如，可以使用 XMLHttpRequest 检索 SVG 文件，将其注入文档中，然后应用样式。

有几点需要注意，例如：

  • 对于命名空间的 SVG，请确保使用 getElementsByTagNameNS。像jQuery这样的库可能与命名空间不兼容。
    • 类名
  • 是对象，你需要使用它们的baseVal属性来分配类名
  • SVG 有自己的 CSS 属性，例如使用填充来分配背景色
  • 等。

你会在网络上找到很多信息，例如这个MDN页面或这个W3C页面。

相关文章：