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 标签中，就可以制作它。