javascript - 如何将一个 svg 形状拖到另一个 svg 中以便保存

Question

我从“svg.js”导入了一个名为“svg.draggable”的库，以便我可以在网页上拖动 SVG 形状。我正在尝试制作一个工具包，用户可以在其中制作自己的面孔。例如，将有一组头部可供用户选择。将会有一组眼睛可供用户选择。到目前为止，您可以选择所需的头部或眼睛类型，并将其拖动到新的 SVG 矩形上以查看脸部的外观。我想保存拖入新 SVG 的所有内容，但是，SVG 保存了一个空白页面，因为它无法识别拖入其中的形状。我怎样才能将形状拖到新的SVG中，以便它可以保存进入其中的所有内容？ 下面是我到目前为止的代码示例:

<style>
   #canvas {
    overflow: hidden;
    background-color: #cccccc;
    }

    #save{
    background-color: #ff0000;
    width: 550px;
    height: 490px;
    overflow: visible;
    }
</style>
   <svg id = "canvas" width="100%" height="100%" viewBox="0 0 400 400" z-index="100">

            <svg id = "droparea" width="100%" height="100%" viewBox="0 0 1100 1100" z-index="100">
               <foreignObject x="520" y="20" width="550" height="485">
                  <svg id = "save">


                  </svg>
               </foreignObject>
            </svg>
   </svg>

<script>
    var canvas = SVG('canvas');

    // function to save everything in the tag
    function saveSvgAsFile()
    {
        var textToSave = save.innerHTML
        //---or use this---
        //var textToSave = new XMLSerializer().serializeToString(mySVG)

        var textToSaveAsBlob = new Blob([textToSave], {type:"text/xml"});
        var textToSaveAsURL = window.URL.createObjectURL(textToSaveAsBlob);
        var fileNameToSaveAs = document.getElementById("inputFileNameToSaveAs").value;

        var downloadLink = document.createElement("a");
        downloadLink.download = fileNameToSaveAs;
        downloadLink.innerHTML = "Download File";
        downloadLink.href = textToSaveAsURL;
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);

        downloadLink.click();
    }

    function destroyClickedElement(event)
    {
        document.body.removeChild(event.target);
    }

    // function to draw the head
    function face_draw() {
    var face = canvas.circle(30).attr({ fill: '#f4e3d7', stroke: '#000000', 'stroke-width':0.15}).move(15,15);
    face.draggable();
    }
<script>

Answer 1

要完成这项工作，需要做一些事情:

1. 当你将圆圈拖到红色时#save SVG，您实际上只是将其拖到该框的顶部。该圆圈仍然只是 #canvas 的子级。 SVG。您需要检测圆圈何时放入 #save 内区域，然后将其从 #canvas 移至至#save你自己。

   • 看看新的 dragIntoBoard()函数，它通过测量圆圈放下时鼠标指针的位置来实现这一点。

2. 读取SVG xml进行保存时，需要使用XMLSerializer而不是save.innerHTML 。 .innerHTML将包含 #save 内的所有元素，但不是外部<svg id="save">根节点。

3. 要使 CSS 应用于导出的 SVG 文件，您需要将其放入 <style> 中。 SVG 内的元素:

   • <svg id="save"> <style> #save { background-color: ...

更新笔:https://jsfiddle.net/euz19d5t/10/