자바 스크립트에서 SVG 생성

Question

자바 스크립트로 SVG를로드하려고합니다. 나는 성공과 함께 꽤 자주했지만, 이번에는 이상한 결과를 가져 왔습니다.

여기

var xmlns = 'http://www.w3.org/2000/svg'; 
var container = document.getElementById('svgContainer'); 
var svg = document.createElementNS(xmlns, 'svg'); 
svg.setAttribute('xmlns', xmlns); 
svg.setAttribute('version', '1.2'); 
var defs = document.createElementNS(xmlns, 'defs'); 
var lg = document.createElementNS(xmlns, 'linearGradient'); 
lg.setAttribute('id', 'lg'); 
defs.appendChild(lg); 
var stop1 = document.createElementNS(xmlns, 'stop'); 
stop1.setAttribute('offset', '0'); 
stop1.setAttribute('style', 'stop-color:#ffffff;stop-opacity:1'); 
lg.appendChild(stop1); 
var stop2 = document.createElementNS(xmlns, 'stop'); 
stop2.setAttribute('offset', '1'); 
stop2.setAttribute('style', 'stop-color:#000000;stop-opacity:1'); 
lg.appendChild(stop2); 
var rg = document.createElementNS(xmlns, 'radialGradient'); 
rg.setAttribute('cx', '171.20810'); 
rg.setAttribute('cy', '196.85463'); 
rg.setAttribute('r', '200.00000'); 
rg.setAttribute('fx', '171.20810'); 
rg.setAttribute('fy', '196.85463'); 
rg.setAttribute('id', 'rg'); 
rg.setAttribute('xlink:href', '#lg'); 
rg.setAttribute('gradientUnits', 'userSpaceOnUse'); 
rg.setAttribute('gradientTransform', 'matrix(1.040418,0.796229,-0.814518,1.064316,153.4218,-150.4353)'); 
defs.appendChild(rg); 
svg.appendChild(defs); 
var g = document.createElementNS (xmlns, 'g'); 
g.setAttribute('transform', 'scale(0.2,0.2)'); 
svg.appendChild(g); 
container.appendChild(svg); 
var path = document.createElementNS (xmlns, 'path'); 
path.setAttribute('d', 'M 450.00000 255.00000 A 200.00000 205.00000 0 1 1 50.000000,255.00000 A 200.00000 205.00000 0 1 1 450.00000 255.00000 z'); 
path.setAttribute('style', 'opacity:1.0000000;fill:url(#rg);fill-opacity:1.0000000;fill-rule:evenodd;stroke:none;stroke-width:8.0000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1'); 
g.appendChild(path); 

은 그래서 적절한 순서 완벽한 HTML의 DOM 요소를 생성 내 JS이지만, 아무것도 표시되지 않습니다. 소스에서 HTML을 복사하여 붙여 넣으면 HTML이 렌더링되지만 Javascript는 렌더링되지 않지만 정확히 동일한 코드입니다.

소스는 here입니다.

이상한 점은 방사형 그라디언트를 DOM에 넣으면 작동한다는 것입니다. here에서 확인할 수 있습니다.

그럼 어떻게해야합니까? 이 문제는 모든 브라우저에서 발생합니다.

도움 주셔서 감사합니다.

=== 나는이 문제를 해결하기 위해 관리 로버트 Longson의 도움으로 편집 ===
가 밖으로 here

Answer 1

당신은 설정할 수 없습니다되는 XLink 그것을 확인 : HREF을의 setAttribute를 사용하여, 당신은 사용해야합니다 setAttributeNS 예를 들어,

var xlinkns = 'http://www.w3.org/1999/xlink'; 
rg.setAttributeNS(xlinkns, 'xlink:href', '#lg'); 

jsfiddle을 이와 같이 변경하면 Firefox에서 작동합니다. 다른 UA는 테스트하지 않았지만 제대로 작동해야합니다.