javascript - 使用 SVG 并应用样式表中的 CSS

Question

所以我在这里浏览了几篇文章和问题，但没有找到 chalice 。

我有一个外部文件 icon.svg ，我想在多个 HTML 文件中使用它，并且每次使用时都有不同的填充和大小。

我不能使用 <object>根据我收集的信息，因为它不允许 CSS 工作表中的样式，除非您从 SVG 文件本身引用该工作表，这会破坏整个目的。

我找到的唯一方法是这样的:

<svg class="icon">
     <use xlink:href="icon.svg#symbolid"></use>
</svg>

CSS 适用。但是我似乎只能添加 symbol 才能做到SVG 文件中的节点并给它们一个 ID，我不想这样做。

另外，这可能不是所有主流浏览器都支持的吗？

有什么办法可以实现吗？

更新:

添加了 javascript/angularjs 的标签，因为解决方案是基于 JS 的。 (见答案)

Answer 1

选项 1 - 使用通用 css 样式

我个人创建了几种填充颜色，并在需要时将类简单地应用到 svg。

HTML

<svg class="icon red">
   <use xlink:href="icon.svg#symbolid"></use>
</svg>

CSS

.icon{
  fill:#000;
}
.red{
  fill:#b00;
}
.blue{
  fill:#ddf;
}

---

选项 2 - SVG 以独特的类别为目标

如果您的 svg 有多个路径，您可以使用其他类来定位每个路径。

HTML

<svg class="icon symbol">
   <use xlink:href="icon.svg#symbolid"></use>
</svg>

CSS

.icon{
  fill:#000;
  height:20px;
  width:20px;
}
.symbol{
  height:40px;
  width:40px;
}
.symbol .path1{
  fill:#b00;
}
.symbol .path2{
  fill:#ddf;
}

---

选项 3 - SVG 作为背景图片

DEMO

要使用 svg 之类的图像，可以将它们作为 css 的目标，甚至可以用作 css 中的背景图像，但每个 svg 符号都需要是一个唯一的文件。

<div class="icon"></div>

.icon{
  display:block;
  height:20px;
  width:20px;
  background: url(icon.svg);
  background-size: 20px 20px;
}

要将 svg 用作不同的高度和宽度，只需在 css 中使用其他类进行编辑，以使用特异性覆盖默认值:

.svg40{
  height:40px;
  width:40px;
}
.svg100{
  height:100px;
  width:100px;
}

---

选项 4 - 内嵌 Svgs(我的推荐)

DEMO

将 svg 文件直接放在您的 html 中以减少 http 请求并提高控制。

HTML

放在 html 顶部的 body 标签之后

<div style="height:0;width:0;position:absolute;visibility:hidden;">
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="symbolid1" viewBox="0 0 64 64">
  <title>symbol 1</title>
  <path ... />
  </symbol>
  <symbol id="symbolid2" viewBox="0 0 64 64">
  <title>symbol 2</title>
  <path ... />
  </symbol>
</div>

然后您可以使用 svg 的 id 从任何地方调用 svg。

<svg class="icon"><use xlink:href="#symbolid"/></svg>

CSS

.icon{
    display:inline-block;
    fill:currentColor;
    width:20px;
    height:20px;
}