html - 有没有办法重新利用 SVG 文件？

Question

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

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

Answer 1

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

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

将此线程视为初学者...使用 javascript 更改 SVG 图像颜色

Answer 2

假设您将 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;
}