0

I'm a newbie with D3.js and I have a specific issue. I'm trying to put one element (circle) inside of an SVG above an HTML div with absolute position, There is something that I could do there?

I've tried putting z-index, changing position types... I think my issue is with the SVG that I can't apply the same rules as normally I do with regular HTML.

See this example https://jsfiddle.net/L70yk9f1/13/ 

div.a {
  width: 400px;
  height: 400px;
  background: lightgrey;
}

div.b {
  width: 200px;
  height: 400px;
  background: lightgreen;
  position: absolute;
  top: 8px;
  left: 400px;
}
<!-- the circle should appear above the green div -->
<div class="a">
  <svg width="400px" height="400px">
    <circle cx="390" cy="100" r="50" x="100" style="stroke: black; fill: yellow;"/>
  </svg>  
</div>
<div class="b"></div>

I'm trying to put the yellow circle (one element inside of an SVG) above the green div.

Achraf Almouloudi
  • 756
  • 10
  • 27
Jerry Martinez
  • 3
  • 1
  • `b` needs to be a child of `a` – Paulie_D Apr 17 '19 at 19:11
  • An svg element with no width and/or height will take the width of the parent. One way to do it is giving the svg a `viewBox` attribute, for example `viewBox = "0 0 400 400"`and put it inside the green div. – enxaneta Apr 17 '19 at 19:15

1 Answers1

0

I think it's what you want..?

div.a {
  width: 100%;
  height: 400px;
  background: lightgrey;
  position:absolute;
}
div.a svg{
    position: absolute;
    z-index: 999999;
    width: 100%;
    height:100%;
}
div.b {
  width: 200px;
  height: 400px;
  background: lightgreen;
  position: absolute;
  top: 8px;
  left: 400px;
}
<!-- the circle should appear above the green div -->
<div class="a">
  <svg>
    <circle cx="390" cy="100" r="50" x="100" style="stroke: black; fill: yellow;"/>
  </svg>  
</div>
<div class="b"></div>
aflyzer
  • 563
  • 3
  • 12
  • Almost because with this, all the element inside of svg will appear above of the green, the idea was only the circle, but you give me other idea for a different approach that maybe could work – Jerry Martinez Apr 18 '19 at 09:19
  • @JerryMartinez Ho ok... But yes with few adaptations is it possible. Good luck :) – aflyzer Apr 19 '19 at 07:07