如何在不使用内联 svg 的情况下使 SVG 可修改

【问题标题】：How to make SVG modifiable without using in-line svg如何在不使用内联 svg 的情况下使 SVG 可修改
【发布时间】：2021-05-03 03:38:15
【问题描述】：

我想在我的网站中使用 SVG 图标，并且我知道使用 <image> 会限制我更改 SVG 属性的能力（例如，我无法更改悬停时的填充颜色）。

于是我找到了 in-line SVG 的方法，它似乎可以更好地进行操作。但直觉告诉我，将 SVG 绘图数据放入 HTML 文件会在未来产生可维护性问题。

我正在尝试找到一种方法，我可以...

这可能吗？如果是，我应该寻找的关键字是什么？

【问题讨论】：

相关：stackoverflow.com/a/61373740/8620333
[link]stackoverflow.com/questions/4906148/… 上的两个最新答案可能会有所帮助。他们在运行时注入 svg，这样您可以获得更好的操作，但不会为维护人员弄乱您的 HTML 源代码。

标签： html css svg

【解决方案1】：

这取决于您使用的编程语言。

例如：

index.php 包含到 svgs.php 文件中。

但是，您可能需要考虑使用 SVG Sprites 创建一个图标文件。 [See]

因此，您可以使用如下短命令从单个“.svg”文件加载多个图标并重新着色。

记住：此技术不支持某些 SVG 功能，例如渐变。 [1][2]

<svg viewBox="0 0 24 24" class="icon">
  <use href="#foo"></use>
</svg>

<svg viewBox="0 0 24 24" class="icon">
  <use href="#bar"></use>
</svg>

自动 SVG 精灵生成器工具：https://svgsprit.es/

最后，您可以使用 SVG 注入器等第 3 部分脚本。

【讨论】：