返回null的svg.contentDocument

Question

尝试使用java脚本更改svg颜色

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

获取错误: SVGDoc为空。基本上，svg.contenteDocument返回的是null。问题出在哪里？

这里是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>

​

Answer 1

尝试至少在本地服务器上运行，如xamp或您喜欢的任何其他服务器

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

Answer 2

尝试：

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

Answer 3

这很可能是你的文档还没有完全加载。因此，尝试使用window.onload()；如果使用JQuery，只需$()即可。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";
}