CODEWITHSUNDEEP
angularjssvg
user1569701
user1569701

Reputation: 313

Change color of dynamically loaded SVG

I'm inserting an SVG through AngularJS:

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

But I can't change the fill of the svg or path through CSS or JS. I'm guessing this is because the SVG is loaded after the API returns its results.

Any tips?

Upvotes: 3

Views: 4259

Answers (1)

Robert Longson
Robert Longson

Reputation: 124269

You need to make the change after the onload of the <embed> has occurred.

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

Upvotes: 3

Related Questions