如何允许svg显示在javascript中的div元素上 [英] How to allow an svg to appear on a div element in javascript
问题描述
目前，我已经使用svg.js库实现了svg.在画布ID(不是div的SVG)上绘制了"draw_face"圆圈.通过调用.draggable()，可以将形状拖动到画布"上的任何位置.但是我也想将其拖到保存" div中，以便可以将该div中的所有svg元素另存为.xml或.svg文件.通过添加ForeignObject，圆会在div的顶部，但是div无法识别该圆在div的内部.当我尝试将结果保存在div上且圆圈位于其上方时，将保存一个空白页.如何使div识别出其中有圆圈，以便保存文件.
At the moment I have implemented an svg using the svg.js library. The circle "draw_face" is being drawn on the canvas id which is an SVG not a div. by calling .draggable(), the shape can be dragged anywhere on the "canvas". however I want to drag it into the "save" div aswell so that I can save all the svg elements within that div as a .xml or .svg file. By adding ForeignObject, the circle goes on top of the div, however the div does not recognise that the circle is inside the div. when I try to save the results within the div when the circle is on top of it, a blank page gets saved. How can I make the div recognise that there is circle inside it so that I can save the file.
#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();
推荐答案
所以，如果您是要尝试将圆圈从容器(目标div)拖动到灰色SVG区域中(如小提琴中所示)我在评论中提供了内容，您认为这是z-index问题-不是.
So if you meant you are trying to be able to drag circles from the container (div you target) into the grey SVG area as you can see in the fiddle I provided in comments, and you think it is a z-index issue - it is not.
SVG空间和HTML空间是不同的，并且两个SVG空间是独立的(除非嵌套)，并且您将无法通过z-index真正实现所需的效果-现在无法在一个SVG空间之外渲染圆SVG.js在DIV中为您创建，它们只是被剔除".
SVG space and HTML space are different as well as two SVG spaces are independent (unless nested) and you will not really achieve what you want via z-index - the circles right now can not be rendered outside of one SVG space that SVG.js is creating for you inside DIV and they just get "culled".
您在这里没有嵌套" SVG场景的原因是"div"的原因-它们不是SVG命名空间的一部分.
The reason you are not getting a "nested" SVG scenario here is cause of "divs" - they are not part of SVG name space.
如果您可以描述您的最终目标-可以解决这个问题: -您可以包装"或找到更好的技术来嵌套SVG空间(使用foreignObject等)
If you could describe your end-goal - it is possible to work around it: - you could "wrap" or find better technique to nest SVG spaces (using foreignObject etc)
我只会使用一个SVG空间进行这种操作:
I would use only one SVG space for such manipulation:
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元素上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
