Я совершенно новичок в html и использую css: я ввел на моей странице диаграмму svg bush & zoom и хочу, чтобы она запускалась как наложение div: https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172
Я определил следующее css:
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
#hover{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
и определил следующую структуру тела:
<body>
<div class="main" id="maindiv">
<div id="overlay" onclick="off()">
<svg id="hover" width="960" height="500"></svg>
</div>
...
[other div]
...
</div>
У меня есть функция on (), чтобы вызвать отображение наложения:
function on(){
document.getElementBtId("overlay").style.display = 'block';
var svg = d3.select("svg"),
...
[codes to populate the svg]
...
}
Результат оказывается в виде функции on (), и отображается оверлейный элемент div, а svg отображается в общий черный цвет , в css должна быть неправильная конфигурация, хотя svg работоспособен.
Я также хочу динамически создавать и удалять svg on trigger в функции on ().
Может кто-нибудь предложить, что изменить в коде, чтобы исправить проблему черного цвета и динамическое создание SVG?
Спасибо