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

svg.contentDocument返回null

3 个答案: