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

【问题标题】：How to allow an svg to appear on a div element in javascript如何允许 svg 出现在 javascript 中的 div 元素上
【发布时间】：2018-04-07 06:45:04
【问题描述】：

目前我已经使用 svg.js 库实现了一个 svg。圆圈“draw_face”正在画布 id 上绘制，它是 SVG 而不是 div。通过调用 .draggable()，可以将形状拖动到“画布”上的任何位置。但是我也想将它拖到“保存” 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();

【问题讨论】：

很难说出你真正想要达到的目标：/你需要提供更多的上下文。在您的小代码中，您在 svg 空间内有一个 div - 这是行不通的。用 svg 容器元素替换 div -
好的，我在代码中添加了更多上下文，请随意查看。谢谢
好的，我为你的问题做了你的工作；）这是你的情况吗：jsfiddle.net/Lmu56awz/3809（还没有答案）你能澄清你到底想要实现什么 - 能够拖动“圆圈”从蓝色 div 到 svg 空间？

标签： javascript html svg

【解决方案1】：

因此，如果您的意思是您试图将圆圈从容器（您的目标 div）拖到灰色 SVG 区域中，正如您在 cmets 中提供的小提琴中看到的那样，您认为这是一个 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 对象的顶部呈现 div，它不允许 svg 形状在拖动时进入其中。
嘿@pinda 你能用你的工作代码创建一个小提琴吗？通过尝试仅根据您的代码重新创建代码的工作方式来帮助您非常困难；/
我想我知道你需要什么。因此，您基本上希望圆圈位于 div 内，以便您可以将 SVG/XML 捕获为文件 - 对吗？
另一个问题 - 为什么你不能抓住 id 为 "canvas" 的 svg 元素来获得你想要的东西？
我一直在努力制作小提琴，因为我以前从未使用过它的脸，而且我的圈子没有在 javascript 中呈现。但是，是的，您是对的，我确实希望圆圈位于 div 内，但只有在将其从默认位置（即 svg“canvas”id ）拖动之后。