JavaScript中的SVG编辑器，上传文件后无法编辑

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标记中，就可以了。