У меня есть div и один элемент h1 и один элемент svg. Я перемещаю элемент SVG в соответствии с положением мыши. z-индекс элемента h1 ниже, а z-индекс элемента sv выше. когда элемент svg наводится на элемент h1, он исчезает в зависимости от того, какую часть я перекрыл. но мне нужно знать, как сделать реверс, так как сначала h1 исчезает, когда я перемещаю элемент svg над элементом h1, затем элемент h1 показывает, в зависимости от того, какая часть элемента svg перекрыта. Я прилагаю картинку и мой код. Пожалуйста, помогите мне, если кто-нибудь знает, как это сделать. 
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="wrap">
</div>
<h1 id="back_head">back</h1>
<svg id="sv">
<circle id="cir" cx="" cy="" r="70" fill="red" />
</svg>
<script src="js/main.js"></script>
</body>
</html>
Мой css:
* {
margin: 0;
padding: 0;
}
#wrap {
background: orange;
position: absolute;
top: 0;
left: 0;
height: 250px;
width: 500px;
z-index: 50;
}
#back_head {
position: absolute;
top: 0;
left: 0;
z-index: 55;
}
#sv {
height: 250px;
width: 500px;
position: absolute;
z-index: 70;
}
мой javascript код:
var cir = document.getElementById("cir");
var wrap = document.getElementById("sv");
wrap.addEventListener("mousemove", function (e) {
var x = e.clientX;
var y = e.clientY;
cir.setAttribute("cx", x);
cir.setAttribute("cy", y);
});