JavaScript를 사용하여 SVG 객체 추가하기

Javasscript 및 SVG를 처음 사용하고 인라인 SVG 객체를 생성하고 속성을 성공적으로 생성 할 수 있습니다.JavaScript를 사용하여 SVG 객체 추가하기

필자는 행운과 함께 SVG 객체를 동적으로 추가하기 위해 코드를 잘라내어 붙여 넣기를 시도했습니다. 다음은 그 시점에서 구문 분석되지 않은 DOM의 부분을 수정하려고하는 것이, 내가 해봤 코드 ...

<html> 
<head> 
<script> 
function setColor(color) 
{ 
document.getElementById("rect").style.fill = color; 
document.getElementById("rect").setAttribute("height",100); 
document.getElementById("line").style.stroke = color; 
document.getElementById("myLine").style.stroke = "blue"; 
} 
    var myrect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); 
    myrect.setAttribute("id", "myrect"); 
    myrect.setAttribute("fill","red"); 
    myrect.setAttribute("stroke","black"); 
    myrect.setAttribute("stroke-width","5"); 
    myrect.setAttribute("x", "100"); 
    myrect.setAttribute("y", "100"); 
    myrect.setAttribute("width", "300"); 
    myrect.setAttribute("height", "300"); 
    svg.appendChild(myrect); 
    </script> 
</head> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 250px"> 
<rect x="50" y="20" width="200" height="200" style="fill:red; stroke:black; stroke-width:3" id="rect" /> 

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" id="line"/> 

<line x1="10" y1="10" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:5" id="myLine"/> 

</svg> 

<button onclick="setColor('red');">Red</button> 
<button onclick="setColor('green');">Green</button> 
<button onclick="setColor('blue');">Blue</button> 

</body> 
</html>

출처

2013-02-16 user1203605

귀하의 문제가 있습니다. 그냥 페이지의 하단에 <script> 태그를 이동하고 <rect>이 생성 될 수 있도록 그것은 작동합니다

<html> 
<head> 
<script> 
function setColor(color) 
{ 
document.getElementById("rect").style.fill = color; 
document.getElementById("rect").setAttribute("height",100); 
document.getElementById("line").style.stroke = color; 
document.getElementById("myLine").style.stroke = "blue"; 
} 
    </script> 
</head> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 250px" id="mySvg"> 
<rect x="50" y="20" width="200" height="200" style="fill:red; stroke:black; stroke-width:3" id="rect" /> 

<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" id="line"/> 

<line x1="10" y1="10" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:5" id="myLine"/> 

</svg> 

<button onclick="setColor('red');">Red</button> 
<button onclick="setColor('green');">Green</button> 
<button onclick="setColor('blue');">Blue</button> 

<script> 
    var svg = document.getElementById('mySvg'); 
    var myrect = document.createElementNS("http://www.w3.org/2000/svg", 'rect'); 
    myrect.setAttribute("id", "myrect"); 
    myrect.setAttribute("fill","red"); 
    myrect.setAttribute("stroke","black"); 
    myrect.setAttribute("stroke-width","5"); 
    myrect.setAttribute("x", "100"); 
    myrect.setAttribute("y", "100"); 
    myrect.setAttribute("width", "300"); 
    myrect.setAttribute("height", "300"); 
    svg.appendChild(myrect); 
</script> 
</body> 
</html>

게다가, 당신은 명시 적으로 <svg> 요소를 선택해야하며, 다음에 추가 할 수 있습니다. 예를 들어, getElementById()을 사용하십시오.

Working Example Fiddle

출처

2013-02-16 09:05:20 Sirko

감사합니다, 작품과 설명이 정말 도움이. – user1203605

JavaScript를 사용하여 SVG 객체 추가하기

답변

관련 문제