Question

目前我已经使用svg.js库实现了一个svg。圆形“draw_face”正在画布id上绘制，它是SVG而不是div。通过调用.draggable（），可以在“画布”上的任何位置拖动形状。但是我想将它拖到“save”div中，以便我可以将该div中的所有svg元素保存为.xml或.svg文件。通过添加ForeignObject，圆圈位于div的顶部，但div不会识别圆圈位于div内部。当我尝试在圆圈位于顶部时将结果保存在div中时，会保存一个空白页面。如何让div识别出里面有圆圈，以便我可以保存文件。

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

        #save{
            background-color: #ff0000;
              width: 550px;
              height: 490px;
        }

        <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">
                   <div id = "save">
                   </div>
                </foreignObject>
           </svg>
       </svg>

var canvas = SVG('canvas');
       function face_draw() {
           var face = canvas.circle(30).attr({ fill: '#f4e3d7', stroke: '#000000', 'stroke-width':0.15}).move(15,15);
           face.draggable();
       }

    face_draw();

Answer 1

所以如果你的意思是你试图能够将容器中的圆圈（你的目标）拖动到灰色的SVG区域，就像我在评论中提供的小提琴中看到的那样，你认为它是一个z-index问题 - 不。

SVG空间和HTML空间不同，两个SVG空间是独立的（除非嵌套）并且你不会真正通过z-index实现你想要的东西 - 现在的圆圈不能在一个SVG空间之外渲染SVG.js在DIV内为你创造，他们只是“剔除”。

这里没有获得“嵌套”SVG场景的原因是“div” - 它们不属于SVG名称空间。

如果您可以描述您的最终目标 - 可以解决它： - 你可以“包装”或找到更好的技术来嵌套SVG空间（使用foreignObject等）

我只使用一个SVG空间进行此类操作：

HTML：

<body>
<svg id = "canvas" width="400px" height="100px" viewBox="0 0 400 100" style="background-color: #cccccc">
    <g id = "save" width="200px" height="100px">
      <rect width="200px" height="100px" fill="red"></rect>
    </g>
</svg>
</body>

JS：

var canvas = SVG('save');

function face_draw() {
    var face = canvas.circle(30).attr({ fill: '#f4e3d7', stroke: '#000000', 'stroke-width':0.15}).move(15,15);
  face.draggy();
}
face_draw();

如何允许svg出现在javascript中的div元素上

1 个答案: