DOM을 통해 생성 된 SVG radient가 렌더링되지 않음

자바 스크립트를 사용하여 svg를 생성하면 다양한 브라우저에 해당 radient가 표시되지 않습니다. 동일한 SVG의 정적 복사본이 완벽하게 표시됩니다. 누구든지 제 코드를 확인해 주시겠습니까?DOM을 통해 생성 된 SVG radient가 렌더링되지 않음

내가

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>SVG Gradient Test</title> 
<script type="text/javascript"> 

function body_onload() { 
    // This document contains two svg's. One is created trough Javascript 
    // and the other is just printed within the HTML. To my surprise the 
    // dynamic one doesn't show any gradient (in Chrome and IE) 
    // what's wrong whith the code? 

    var xmlns = "http://www.w3.org/2000/svg"; 
    // get svg 'holder' div 
    var svgDiv = document.getElementById("svgDiv"); 

    // create svg and add to divHolder 
    svg = document.createElementNS(xmlns, "svg"); 
    svg.setAttributeNS(null, "version", "1.1"); 
    svg.setAttributeNS(null, "baseProfile", "tiny"); 
    svgDiv.appendChild(svg); 

    // add defs 
    var defs = document.createElementNS(xmlns, "defs"); 
    svg.appendChild(defs); 

    // create linear Gradient called 'myGradient' to defs 
    var linGrad = document.createElementNS(xmlns, "linearGradient"); 
    linGrad.setAttributeNS(null, "id", "myGradient"); 
    linGrad.setAttributeNS(null, "x1", "0%"); 
    linGrad.setAttributeNS(null, "y1", "0%"); 
    linGrad.setAttributeNS(null, "x2", "0%"); 
    linGrad.setAttributeNS(null, "y2", "100%"); 
    var stop1 = document.createElementNS(null, "stop"); 
    stop1.setAttributeNS(null, "offset", "0%"); 
    stop1.setAttributeNS(null, "stop-color", "red"); 
    stop1.setAttributeNS(null, "stop-opacity", "1"); 
    linGrad.appendChild(stop1); 
    var stop2 = document.createElementNS(null, "stop"); 
    stop2.setAttributeNS(null, "offset", "100%"); 
    stop2.setAttributeNS(null, "stop-color", "blue"); 
    stop2.setAttributeNS(null, "stop-opacity", "1"); 
    linGrad.appendChild(stop2); 
    defs.appendChild(linGrad); 

    // create rectangle and add to svg 
    var rect = document.createElementNS(xmlns, "rect"); 
    rect.setAttributeNS(null, "x", "40"); 
    rect.setAttributeNS(null, "y", "20"); 
    rect.setAttributeNS(null, "width", "60"); 
    rect.setAttributeNS(null, "height", "90"); 
    rect.setAttributeNS(null, "fill", "url(#myGradient)"); 
    rect.setAttributeNS(null, "stroke", "black"); 
    rect.setAttributeNS(null, "stroke-width", "1"); 
    svg.appendChild(rect); 
} 
</script> 
</head> 
<body onload="javascript:body_onload();"> 
    <div id="svgDiv" style="width:200px; height:120px;"></div> 
    <div id="svgDiv2" style="width:200px; height:200px;"> 
     <svg version="1.1" baseProfile="tiny"> 
      <defs> 
       <linearGradient id="myGradient2" x1="0%" y1="0%" x2="0%" y2="100%"> 
        <stop offset="0%" stop-color="red" stop-opacity="1"></stop> 
        <stop offset="100%" stop-color="blue" stop-opacity="1"></stop> 
       </linearGradient> 
      </defs> 
      <rect x="40" y="20" width="60" height="90" fill="url(#myGradient2)" stroke="black" stroke-width="1"></rect> 
     </svg> 
    </div> 
</body> 
</html>

출처

2013-10-09 merfor

정지 요소가 너무 즉

document.createElementNS(xmlns, "stop");

출처

2013-10-09 17:37:26

아 감사 SVG 네임 스페이스에 있어야 크롬 (v30.x)와 IE (v10.x)를 사용하고, 그것은 작품! – merfor

도와 주신다면 눈금을 클릭하여 대답을 수락하십시오. –

DOM을 통해 생성 된 SVG radient가 렌더링되지 않음

답변

관련 문제