How to change SVG's path color?

Question

Update: Yes, I know there are similar questions on SO, but the solutions don\'t work either.

I want to change SVG\'s color, I mean paths\'s color, n

Answer 1

Base on accepted answer, I created sample to click button and change color path.

Important thing:

I need host HTML file to webserver (IIS) to run it. If not it a.contentDocument always return null.

I share for whom concerned.

        var svgDoc;
        function changeColor() {
            svgDoc = a.contentDocument;
            // get the inner element by id
            var paths = svgDoc.querySelectorAll("path");
            // add behaviour
            for (i = 0; i < paths.length; i++) {
                paths[i].setAttribute('style', 'fill:pink');
            }
        }

        var a = document.getElementById("alphasvg");

        // It's important to add an load event listener to the object,
        // as it will load the svg doc asynchronously
        a.addEventListener("load", function () {

            // get the inner DOM of alpha.svg
            svgDoc = a.contentDocument;
            // get the inner element by id
            var paths = svgDoc.querySelectorAll("path");
            // add behaviour
            for (i = 0; i < paths.length; i++) {
                paths[i].setAttribute('style', 'fill:green');
            }

        }, false);

    
    
    



    
    

    Change Color