2017-06-21 80 views
1

试图改变颜色的SVG和Java脚本svg.contentDocument返回null

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> 

+2

没有你等待的对象标签的onload事件? –

回答

-1

尝试:

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