CODEWITHSUNDEEP
javascriptsvg
marslanayyoob
marslanayyoob

Reputation: 81

svg.contentDocument returning null

trying to change svg color with java script

HTML

<object class="svg" id="flag-svg" type="image/svg+xml" data="Group_8.svg"></object>

JavaScript

// Get the Object by ID
var svg = document.getElementById("flag-svg");
console.log(a);
// Get the SVG document inside the Object tag
var svgDoc = svg.contentDocument;
console.log(svgDoc);
// Get one of the SVG items by ID;
var svgItem = svgDoc.getElementById("flag");
//console.log(svgItem);
// Set the colour to something else
svgItem.style.fill ="blue";

getting Error: SVGDoc is null. basically svg.contenteDocument is returning null. where is the issue?

here is svg

<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>Group 8</title>
<desc>Created with Sketch.</desc>
<defs/>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="Replay" transform="translate(-99.000000, -35.000000)">
        <g id="Group-10" transform="translate(99.000000, 35.000000)">
            <g id="Group-8">
                <g id="Group-7" fill="#34CE8B">
                    <circle id="Oval-Copy-3" cx="25" cy="25" r="25"/>
                </g>
                <g id="flag" transform="translate(17.000000, 13.000000)" fill-rule="nonzero" fill="#FFFFFF">
                    <path d="M17.7426818,1.31083333 C17.6596364,1.27708333 15.6726818,0.47875 13.3183636,0.47875 C11.9135455,0.47875 10.6715455,0.765 9.62672727,1.32958333 C8.70095455,1.83 7.44504545,2.08333333 5.89377273,2.08333333 C3.72231818,2.08333333 1.58113636,1.57833333 0.818181818,1.37791667 L0.818181818,0.416666667 C0.818181818,0.18625 0.635318182,0 0.409090909,0 C0.182863636,0 0,0.18625 0,0.416666667 L0,1.66666667 C0,1.6725 0.00286363636,1.6775 0.00327272727,1.68333333 C0.00327272727,1.68833333 0,1.6925 0,1.6975 L0,13.75 L0,14.1975 L0,24.5833333 C0,24.81375 0.182863636,25 0.409090909,25 C0.635318182,25 0.818181818,24.81375 0.818181818,24.5833333 L0.818181818,14.73875 C1.74804545,14.97375 3.78122727,15.4166667 5.89377273,15.4166667 C7.58004545,15.4166667 8.96481818,15.13 10.0100455,14.5658333 C10.9358182,14.0654167 12.0485455,13.8116667 13.3183636,13.8116667 C15.5098636,13.8116667 17.4203182,14.5766667 17.4391364,14.5841667 C17.5655455,14.6358333 17.7079091,14.62 17.8204091,14.5416667 C17.9325,14.465 18,14.3358333 18,14.1975 L18,1.6975 C18,1.52708333 17.8981364,1.37416667 17.7426818,1.31083333 Z" id="Shape"/>
                </g>
            </g>
        </g>
    </g>
</g>

Upvotes: 3

Views: 5700

Answers (3)

Umair Abid
Umair Abid

Reputation: 123

try run at least on local server like xamp or any other you like 

<script>
            var svg = document.getElementById("flag-svg");

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

                var svgDoc = svg.contentDocument;
                console.log(svgDoc);
                // Get one of the SVG items by ID;
                var svgItem = svgDoc.getElementById("flag");
                //console.log(svgItem);
                // Set the colour to something else
                svgItem.style.fill ="blue";

            }, false);
        </script>

Upvotes: 6

axdrv
axdrv

Reputation: 113

It is most probably your document still not completely loaded. So, try to wrap in window.onload(); either if use JQuery simply $(). f.ex.

window.onload = function () {
   var svg = document.getElementById("flag-svg");
   console.log(a);
   // Get the SVG document inside the Object tag
   var svgDoc = svg.contentDocument;
   console.log(svgDoc);
   // Get one of the SVG items by ID;
   var svgItem = svgDoc.getElementById("flag");
   //console.log(svgItem);
   // Set the colour to something else
   svgItem.style.fill ="blue";
}

Upvotes: -1

Mos Gomez
Mos Gomez

Reputation: 1

Try:

document.getElementById("flag").style.fill = "#FF00FF";

Upvotes: -2

Related Questions