Question

我试图在svg的顶部添加元素（按钮，列表和下拉列表）（如叠加层）。我不确定如何实现这一点，我的svg运行正常。当我使用下面的代码将元素追加到svg时，我可以看到元素是在检查器中添加的，但在浏览器窗口中是不可见的。任何人都可以建议为什么它不可见/更好的解决方案？

SVG插件：

jquery svg pan-zoom，
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>');
});

更新

Iv更改了附加到容器的元素并应用了样式以强制导航到正确的位置。但是我需要使用％of container和overflow来隐藏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

尝试在position:relative;

上添加.container-svg

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;
}

SVG上的HTML元素（ui overlay）

更新

已解决

1 个答案: