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

我尝试使用innerHTML而不是使用outerHTML。现在问题完全解决了。我想使用外部HTML将基于以前的svg元素擦除事件监听器，因此只需使用slice（）方法读取svg标记内的svg元素，并将其放入原始svg标记中，制作它。

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

1 个答案: