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

Question

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

我有一个外部文件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

我最终<object>在 SVG 渲染后使用和操作它，以帮助我更改样式的方式。

对于任何对更多技术细节感兴趣的人，我已在我的博客中编写了该过程。

我已经在 Angular 中创建了一个指令来处理它，但当然您不必使用 Angular，并且可以根据需要获取相关部分并使用它。

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