有没有办法重新使用SVG文件？

Question

我想知道有没有办法重新定位SVG文件？

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

Answer 1

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

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

将此主题视为首发...... Changing SVG image color with javascript

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;
}