SVG-Editor in JavaScript, können nicht bearbeitet werden nach dem Hochladen von Dateien

Question

HTML-Datei

<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 Teil:

$('#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); 
    }) 

Mein Problem ist, dass, nachdem die Seite die SVG-Datei laden, es erfolgreich erscheint der Seiteneditierungsteil, aber ich kann sein Element nicht bearbeiten. Und der Editor funktioniert gut, wenn ich keine Datei hochlade. Jede Hilfe wird geschätzt.

---

Beispielzeichnung Funktion

//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); 
}); 

Statt Outerhtml verwenden, habe ich versucht innerHTML.Now Problem perfekt gelöst. Ich denke, die Verwendung der äußeren HTML löscht den Event-Listener basierend auf dem ehemaligen SVG-Element, also einfach die slice() -Methode verwenden, um das SVG-Element innerhalb der SVG-Tags zu lesen, und es in die Ursprungs-SVG-Tags einfügen.