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

您需要在 onload<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>