{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Ridiculous、 的问题《How to allow an svg to appear on a div element in》','https://www.manongdao.com/q-947464.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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();
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 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".
The reason you are not getting a "nested" SVG scenario here is cause of "divs" - they are not part of SVG name space.
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)
I would use only one SVG space for such manipulation:
HTML:
JS: