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

需要做一些事情来完成这项工作：

当您将圆圈拖到红色ng s SVG中时，实际上只是将拖到那个框的顶部。该圈子仍然只是#save SVG的孩子。您需要检测圈子在#canvas区域内的放置时间，然后自己将其从#save移至#canvas。
- 查看新的#save函数，它通过测量圆圈被丢弃时鼠标指针的位置来实现。
在阅读SVG xml进行保存时，您需要使用dragIntoBoard()代替XMLSerializer。 save.innerHTML将包含 {/ 1>}内的所有元素，但不包括外部.innerHTML根节点。

要使CSS适用于导出的SVG文件，您需要将其放在SVG内的#save元素中：

<svg id="save">

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

如何将svg形状拖动到另一个svg中以便可以保存它

1 个答案: