Блог

Главная - Вопросы по программированию - Есть ли способ поместить элемент SVG над HTML div с абсолютной позицией?

Есть ли способ поместить элемент SVG над HTML div с абсолютной позицией?

#javascript #html #css #d3.js #svg

#javascript #HTML #css #d3.js #svg

Вопрос:

Я новичок в D3.js и у меня есть конкретная проблема. Я пытаюсь поместить один элемент (круг) внутри SVG над HTML div с абсолютной позицией, есть что-то, что я мог бы там сделать?

Я пробовал вводить z-индекс, меняя типы позиций… Я думаю, что моя проблема с SVG заключается в том, что я не могу применять те же правила, что и обычно, с обычным HTML.

Смотрите этот пример 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>

Я пытаюсь поместить желтый круг (один элемент внутри SVG) над зеленым div.

Комментарии:

1. b должен быть дочерним элементом a

2. Элемент svg без ширины и / или высоты будет занимать ширину родительского элемента. Один из способов сделать это — присвоить svg viewBox атрибут, например viewBox = "0 0 400 400" , и поместить его в зеленый div.

Ответ №1:

Я думаю, это то, что вы хотите ..?

 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>

Комментарии:

1. Почти потому, что при этом все элементы внутри svg будут отображаться над зеленым цветом, идея заключалась только в круге, но вы даете мне другую идею для другого подхода, который, возможно, мог бы сработать

2. @JerryMartinez Хо ок… Но да, с небольшими изменениями это возможно. Удачи 🙂

Метки: