更改动态加载的 SVG 的颜色

【问题标题】：Change color of dynamically loaded SVG更改动态加载的 SVG 的颜色
【发布时间】：2013-10-28 13:21:43
【问题描述】：

我正在通过 AngularJS 插入 SVG：

<embed embed-src="{{sportImage}}" type="image/svg+xml" class="svg sport-image" width="470" height="418" />

但我无法通过 CSS 或 JS 更改 svg 或路径的填充。我猜这是因为 SVG 是在 API 返回结果之后加载的。

有什么建议吗？

【问题讨论】：

如果你将你的 svg 添加为内联 svg，你应该可以用它做任何你想做的事情。是否有理由不将其添加为内联？

标签： angularjs svg

【解决方案1】：

您需要在<embed> 的加载发生后进行更改。

<embed embed-src="{{sportImage}}" type="image/svg+xml" class="svg sport-image" width="470" height="418" onload="f()" id="something" />
<script>
    function f() {
        var svg = document.getElementById('something');
        var element = svg.getSVGDocument().getElementById("an-id-in-the-embedding");
        element.setAttribute("fill", "some-colour");
    }
</script>

【讨论】：