angularjs - 更改动态加载的 SVG 的颜色

Question

我正在通过 AngularJS 插入 SVG:

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

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

有什么建议吗？

Answer 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>