CODEWITHSUNDEEP
javascripthtmlsvg
MasterNone
MasterNone

Reputation: 568

Changing svg objects color?

HTML: svg object and script that should change color of the svg object but for some reason it doesnt?

<object id="object" type="image/svg+xml" data="play-pattern--light.svg"></object>

       <script type="text/javascript">
        window.onload=function () {

            var a = document.getElementById("object");
            var svgDoc = a.contentDocument;
            var styleElement = svgDoc.createElementNS("http://www.w3.org/2000/svg", "style");
            styleElement.textContent = ".st0 { fill: #000 }";
            svgDoc.getElementById("object").appendChild(styleElement);
        };

      </script>

I think this is all you need to color an SVG object

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="160px" height="160px" viewBox="0 0 160 160" style="enable-background:new 0 0 160 160;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#EDF5F5;}
</style>

Need some guidance why my code is not working, it also says an error "Uncaught TypeError: Cannot read property 'appendChild' of null"

Thanks

Upvotes: 1

Views: 189

Answers (1)

Dmitriy
Dmitriy

Reputation: 3765

You should use:

svgDoc.documentElement.appendChild(styleElement);

instead of

svgDoc.getElementById("object").appendChild(styleElement);

Upvotes: 1

Related Questions