javascript를 사용하여 SVG에 인라인 SVG 추가

다음 텍스트가 있는데 여기에는 텍스트 상자의 각 줄에 하나씩 "name : number"구조가 있어야하는 가로선을 추가하려고합니다.javascript를 사용하여 SVG에 인라인 SVG 추가

<!DOCTYPE html> 
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> 
<head> 
    <meta charset="UTF-8" /> 
    <meta http-equiv="pragma" content="no-cache"/>  
    <title>Diagrama Audax</title> 

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 

    <style type="text/css"> 
     #sidebar {float: left; display: inline-block;} 
     #drawing {left: 330px; position: relative; display: inline-block} 
     #Locais {width: 300px; height: 500px;} 
     svg {background: #ddd; width: 500px; height: 500px;} 
     td, textarea {margin: 0; padding: 0;} 
    </style> 
</head> 

<body> 
    <table> 
     <tr id="tabela" cols="2"> 
      <td> 
       <textarea id="Locais"></textarea> 
      </td> 
      <td> 
       <svg id="svg"> 
        <circle stroke="black" fill="red" cx="200" cy="200" r="100" opacity="0.1"/> 
        <line id="path" x1="0" y1="0" x2="200" y2="200" stroke="black"/> 
       </svg> 
      </td> 
     </tr> 
    </table> 
</body> 

<script> 

    // A função abaixo pega a caixa de texto e associa o evento "draw" a ela 
    $(function() { 
     $("#Locais").keyup(function() { 
      valueString = $("#Locais").val(); 
      if (valueString != "") { 
       lines = valueString.replace("\r","").split("\n"); 
       CPs = []; 

       for (i in lines) { 
        eachLine = lines[i]; 
        tmpDict = {}; 
        values = eachLine.split(":"); 
        for (j in values) { 
         eachVal = values[j]; 
         tmpDict[j] = eachVal; 
        } 
        CPs.push(tmpDict); 
       } 
       DrawUsing(CPs); 
      } 
     }) 
    }); 


    function DrawUsing (lista) { 
     var svg = document.getElementById("svg"); 
     for (element in lista) { 
      refname = lista[element][0]; 
      refdist = lista[element][1]; 
      var line = document.createElement ("line"); 
      line.setAttribute('stroke', "black"); 
      line.setAttribute('stroke-width', 1); 
      line.setAttribute('x1', 0); 
      line.setAttribute('x2', 100); 
      line.setAttribute('y1', refdist); 
      line.setAttribute('y2', refdist); 
      svg.appendChild(line); 
      console.log(document.getElementsByTagName("line").length); 
     } 
    } 
</script> 
</html>

"워밍업"으로, 키를 누를 때마다 SVG를 조작하여 SVG를 조작하려고했습니다. 다음 텍스트를 붙이면 (단지 Ctrl + V로 붙이면 충분합니다), svg 하위 목록은 증가하지만 추가 선은 보이지 않습니다.

내가 뭘 잘못하고 있니? (많이, 나는 자바 스크립트로 매우 n00b이고, <object>과 대조적으로 인라인 <svg> 요소에 대한 직접 조작이 문서화되지 않았기 때문에 매우 ... 자세히

어떤 도움을 주셔서 감사합니다. 읽기!

출처

2012-09-24 heltonbiker

SVG 요소가 http://www.w3.org/2000/svg 네임 스페이스에 갈 그래서 대신

var line = document.createElement ("line");

사용

var line = document.createElementNS ("http://www.w3.org/2000/svg","line");

출처

2012-09-24 23:19:30 Alohci

javascript를 사용하여 SVG에 인라인 SVG 추가

답변

관련 문제