DEMO

Question

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

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

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

我发现如何做到这一点的唯一方法就是这样：

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

CSS适用。但是，如果我在SVG文件中添加symbol个节点并给它们一个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

的顶部

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

Answer 2

我最终使用<object>并在渲染SVG后对其进行操作，这样可以帮助我改变样式。

对于对更多技术细节感兴趣的人，我已经编写了here in my blog的过程。

我已经在Angular中创建了一个指令来处理它，但当然你不必使用Angular并且可以随意使用相关部分并使用它。

编辑：为它写了一个凉亭，你可以得到它here。

使用SVG并从样式表中应用CSS

2 个答案:

DEMO

DEMO