0

Im trying to add elements (buttons,lists and dropdowns) ontop of an svg (like an overlay). Im unsure how to achieve this, my svg is functioning fine. When I append elements to the svg using the below code I can see the elements are added in the inspector but are not visable in the browser window. Can anyone suggest why its not visable /a better solution?

SVG Plugins:

  • jquery svg pan-zoom,
  • jquery svg + svgdom (keith wood),

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

UPDATE

Iv altered the element append to the container and applied styles to force the nav to the correct position. But I need the contents of the map-nav to be styled using % of container and overflow to be hidden (without forcing the absolute position style). Is there not a way to achieve an overlay like this?

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

SOLVED

Ended up using the below CSS to style a column down the left hand side of my svg container(setting height dynamiclly on 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;
}
Orbitall
  • 611
  • 11
  • 36

1 Answers1

0

Here is a working example

Try adding position:relative; on the .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;
}
krunos
  • 163
  • 1
  • 9
  • Adding the position absolute and referencing the container when appending allowed the cotent to be visable...Thanks. I can now avoid editing the svg directly by using those last 4 lines! – Orbitall Aug 26 '15 at 20:48
  • I want the contents of the map-nav to be styled using % of container and overflow to be hidden. Is there not a way to achieve an overlay like this without forcing the abosulte display style? – Orbitall Aug 27 '15 at 08:59
  • I am not sure what you mean? :) – krunos Aug 27 '15 at 09:44
  • if I change height of container-svg (dynamically) the map-nav will overlap (even though 'overflow:hidden' is set on container-svg) using top and right with width:100%,height:100% also doesnt fit to container. Is this not due to 'position:absolute'? Is there a way I can use the parent container(width + height + overflow inhertence) and overlay svg sibling? – Orbitall Aug 27 '15 at 10:38
  • Try use `overflow:auto;` and `min-height 'Some height'` on `.container-svg` :) – krunos Aug 27 '15 at 12:18
  • **@ krunos** Thanks, I managed to get UI working after heavy tweaking...although for some unknown reason 100% width and height would allways overlap parent container(around 96% was true fit)? But I just set a 20% width and dynamically set the height (px) when the parent container was adjusted with page load/resize. – Orbitall Aug 30 '15 at 16:14