HTML 元素在 SVG 之上（ui 叠加）

Question

我正在尝试将元素（按钮、列表和下拉菜单）添加到 svg（如叠加层）之上。我不确定如何实现这一点，我的 svg 运行良好。当我使用以下代码将元素附加到 svg 时，我可以看到元素已添加到检查器中，但在浏览器中不可见 window。谁能建议为什么它不可见/更好的解决方案？

SVG 插件：

jquery svg 平移缩放，
jquery svg + svgdom（基思·伍德），

HTML:

 <div class="row">
     <div class="container-svg"></div>
 </div>

CSS:

.map-nav
{
    background-color: white;
    width:200px;
    height:1000px;
    float:right;
    position: absolute;
}

JS:

$('.container-svg').load("img/floorplan.svg", null, function() 
{
    $('.container-svg svg').append('<div class="map-nav"> <button>building 1</button></div>');
});

更新

我更改了附加到容器的元素并应用样式以强制导航到正确的位置。但是我需要使用 % of container 来设置 map-nav 的内容样式，并隐藏溢出（不强制使用绝对位置样式）。有没有办法实现这样的覆盖？

CSS:

.map-nav
{
    background-color: white;
    width:200px;
    height:1000px;
    float:right;
    position: absolute;
    top:20%;
    right:8%;
    margin:-100px 0 0 -100px;
}

JS:

$('.container-svg').load("img/floorplan.svg", null, function() 
{
    $('.container-svg').append('<div class="map-nav"> <button>building 1</button></div>');
});

已解决

最终使用下面的 CSS 在我的 svg 容器的左侧设置一列样式（在 pageload/resize 上动态设置高度）。

.nav-svg
{
  width:20%;
  background-color: rgba(0, 0, 0, 0.5);
  bottom:0;
  position: absolute;
  overflow: hidden;
  padding: 10px;
  padding-left: 70px;
  list-style: none;
}

Answer 1

这是一个有效的 example

尝试在 .container-svg

上添加 position:relative;

JS

$('.container-svg').load("img/floorplan.svg", null, function() 
{
$('.container-svg').append('<div class="map-nav"> <button>building   1</button></div>'); // you had .container-svg svg i removed the last svg :)
});

HTML

<div class="row">
 <div class="container-svg"></div>
</div>

CSS:

.container-svg{
  position:relative; /* add position:relative on the out box */
  width:1000px;
  height:1000px;
  background:red;
}

.map-nav
{
background-color: white;
width:200px;
height:200px;
position: absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

HTML 元素在 SVG 之上（ui 叠加）

HTML elements ontop of SVG (ui overlay)

html

css

jquery

svg

overlay

更新

已解决