有没有办法重新利用 SVG 文件？答案

【问题标题】：Is there a way to re-purpose an SVG file?有没有办法重新利用 SVG 文件？
【发布时间】：2013-03-10 10:32:09
【问题描述】：

我想知道有没有办法重新调整 SVG 文件的用途？

我的意思是，我的标头区域中有我的徽标 SVG 文件，整个设置为黑色，我可以在页脚区域中使用完全相同的文件并使用不同的颜色吗？还是我必须为此创建另一个 SVG 文件？

【问题讨论】：

如果相关，请指定“html”标签。
执行此操作的一种方法是通过服务器的脚本语言提供服务，并添加查询字符串以修改徽标的某些属性（例如颜色）。这样您就不必维护该文件的多个类似副本。
按照@halfer 的想法，您可以将颜色设置为唯一文本（例如%myLogoColor%），然后使用服务器端脚本将 $myLogoColor$ 替换为您可能想要的任何内容。

标签： html svg

【解决方案1】：

假设您将 SVG 嵌入到 SVG 标记中（而不是在 img 标记中），您的 html 看起来有点像：

<header>
  <svg xmlns="http://www.w3.org/2000/svg">
     <path d="..." class="logo_fill">
  </svg>
<header>

<footer>
  <svg xmlns="http://www.w3.org/2000/svg">
     <path d="..." class="logo_fill">
  </svg>
<footer>

然后，您可以在 CSS 中声明：

header svg .logo_fill {
    fill: red;
}

footer svg .logo_fill {
    fill: gray;
}

【讨论】：

这可能有效，但我的徽标包含许多不同的元素，不仅仅是路径，它还有路径、圆圈、线条等。这是否意味着我必须将类标签添加到我拥有的每个元素?
另外我的 svg 文件是外部的，我用
如果我可以选择，我不会让它内联。对象标签可能没问题，具体取决于您的具体情况。有关 W3C SVG Primer 的链接，请参阅此线程。 stackoverflow.com/questions/4476526/… 本教程还讨论了一些选项。 edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial

【解决方案2】：

SVG 是 XML，因此它可以“按设计”重复使用。正如@halfer 和@Kroltan 已经指出的那样，您可以使用服务器端语言来更改徽标颜色。

如果您无法访问服务器端，您也可以使用客户端脚本甚至 XSLT 来执行此操作。

将此线程视为初学者...Changing SVG image color with javascript

【讨论】：