网页中可重新着色的 SVG 图标？

Question

我正在编写一个非常复杂、大而长（它可能会显示很多天）的网页，它也需要图标。这些图标应该是 SVG 图形。根据页面上的位置，SVG 应该通过 JavaScript 调用重新着色（jQuery 甚至 jQuery-SVG 都可以）。

所以我的问题是：

• 在网页中包含 SVG 的最佳方式是什么？
  • <img>
  • <object>
  • jQuery(...).svg({loadUrl:...})
  • ...
• 如何“倍增”它们？
  • 在隐藏的<div> 和 clone() 中预加载？
  • 按需加载？
• 设置 SVG 的最佳方法是什么？ （不同图层上的一个文件中的所有图标？一个文件中的所有图标按位置分隔？每个图标一个文件？）
• 那么重新着色图标的最佳方法是什么？ （想想由线条图形组成的非常抽象的图标，该线条应该得到不同的颜色）

所需的浏览器是通常兼容的现代浏览器（Firefox、Chrome、Opera、Safari），适用于普通 PC 和移动设备（Android、iOS）。不需要 Internet Explorer 兼容性。

Answer 1

如果你想给它重新着色，那么<img> 马上就出来了，因为你不能在外部或内部使用 javascript 更改图像。

如果您放置克隆数据，那么您需要确保任何 id 属性在单个文档中保持唯一，因此也许拥有 <object> 对您来说是最简单的。

您可以使用直接的 DOM 调用来更改 SVG 图形中事物的颜色，也可以根据需要使用 jquery。

对于其余部分，您可能需要尝试一下，看看它们对您有什么效果。