SVG编辑器中的JavaScript，上传文件后不能编辑

Question

HTML文件

<div id="center"> 
       <svg class="paint" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
        </svg> 
</div> 


<input type="file" accept="image/svg+xml" id="file" class="btn btn-secondary" /> 

JS部分：

$('#file').on('change', function (file) { 
     var imageFile = document.getElementById('file').files[0]; 
     if (imageFile) { 
      var reader = new FileReader(); 
      reader.readAsText(imageFile, 'UTF-8'); 
      reader.onload = function (e) { 
       svg.outerHTML = e.target.result; 
      }; 
     } 
     console.log(imageFile); 
    }) 

我的问题是，页面加载.svg文件后，它会出现成功上页面编辑部分，但我不能编辑它的元素。如果我不上传文件，编辑器运行良好。任何帮助表示赞赏。

---

样本绘图功能

//tool for straight line 
function tool_line(action, x, y) { 
    //console.log(action); 
    switch (action) { 
     case "mousedown": 
      console.log(current_tool); 
      if (!mouseisdown) { 
       return; 
      } 
      startx = x; 
      starty = y; 
      break; 
     case "mousemove": 
      if (!mouseisdown) { 
       return; 
      } else { 
       console.log(current_tool); 
       $(current_marker).remove(); 
       current_marker = svg_line(startx, starty, x, y); 
      } 
      break; 
     case "mouseup": 
      console.log(current_tool); 
      $(current_marker).remove(); 
      svg_line(startx, starty, x, y); 
      break; 
    } 
} 

function svg_line(startX, startY, endX, endY) { 
    var newElement = document.createElementNS("http://www.w3.org/2000/svg", 'line'); 
    newElement.setAttribute("class", "svgobject"); 
    newElement.setAttribute("stroke", 'black'); 
    newElement.setAttribute("fill", 'none'); 
    newElement.setAttribute("stroke-width", "3"); 
    newElement.setAttribute("x1", startX); 
    newElement.setAttribute("x2", endX); 
    newElement.setAttribute("y1", startY); 
    newElement.setAttribute("y2", endY); 
    newElement.setAttribute("id", gid++); 
    newElement.setAttribute("transform", 'translate(0,0)'); 
    svg.appendChild(newElement); 
    return newElement; 
} 

Answer 1

$('#file').on('change', function (file) { 
    var imageFile = document.getElementById('file').files[0]; 
    if (imageFile) { 
     var reader = new FileReader(); 
     reader.readAsText(imageFile, 'UTF-8'); 
     reader.onload = function (e) { 
      svg.innerHTML = e.target.result.slice(70, -6); //!important 
     }; 
    } 
    console.log(imageFile); 
}); 

而不是使用outerHTML的，我试过innerHTML.Now问题完美解决。我猜想使用外部HTML会根据前面的svg元素擦除事件监听器，所以只需使用slice（）方法读取svg标签内的svg元素，并将其放入原始svg标签中即可。