SVG mouseenter glitch

Question

私はSVGサークルを使用していますが、私はmouseenter SVGサークルを表示するたびに<text>タグの中に<a>というタグを表示します。しかし、<text>タグの上にカーソルを置くたびに私は不具合が発生し、リンクをクリックすることさえできません。

var buttonCircle = document.querySelector('.circle-four'); 
 
var link = document.querySelector('.showLink') 
 

 

 

 
function animateButton(scale, duration, elasticity) { 
 
    anime.remove(buttonCircle); 
 
    anime({ 
 
     targets: buttonCircle, 
 
     scale: scale, 
 
     duration: duration, 
 
     elasticity: elasticity 
 
    }); 
 
} 
 

 

 
function enterButton(){ 
 
    animateButton(3, 800, 400) 
 
    link.classList.add('work') 
 
} 
 
function leaveButton(){ 
 
    animateButton(1, 600, 300) 
 
    link.classList.remove('work') 
 
} 
 

 
buttonCircle.addEventListener('mouseenter', 
 
enterButton, false); 
 
buttonCircle.addEventListener('mouseleave', leaveButton, false)

.circle-four{fill:#EAEAEA} 
 
.circle-four { 
 
    cursor: pointer; 
 
} 
 

 

 
.work { 
 
    display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg x="0px" y="0px" viewBox="0 0 792 612"> 
 
    <g> 
 
    <circle class="circle-four el" cx="37.162" cy="37.162" r="37.162">   </circle> 
 
    <text class="showLink" x="100" y="85" font-family="Verdana" font-size="15" display="none"> 
 
      <a href="https://stackoverflow.com/" target="_blank">Projects</a> 
 
    </text> 
 
    </g> 
 

 
</svg>

Answer 1

私は事は、マウスとすぐそれがテキスト上に置くように大きな円を残していることだと思います。プロジェクトテキストに大きな円を作るイベントを追加することで、これを解決できます。

var buttonCircle = document.querySelector('.circle-four'); 
 
var link = document.querySelector('.showLink') 
 

 
var myprojectsa=document.querySelector('#myprojects') 
 

 
function animateButton(scale, duration, elasticity) { 
 
    anime.remove(buttonCircle); 
 
    anime({ 
 
     targets: buttonCircle, 
 
     scale: scale, 
 
     duration: duration, 
 
     elasticity: elasticity 
 
    }); 
 
} 
 

 

 
function enterButton(){ 
 
    animateButton(3, 800, 400) 
 
    link.classList.add('work') 
 
} 
 
function leaveButton(){ 
 
    animateButton(1, 600, 300) 
 
    link.classList.remove('work') 
 
} 
 

 
buttonCircle.addEventListener('mouseenter', 
 
enterButton, false); 
 
myprojectsa.addEventListener('mouseenter', 
 
enterButton, false); 
 
buttonCircle.addEventListener('mouseleave', leaveButton, false)

.circle-four{fill:#EAEAEA} 
 
.circle-four { 
 
    cursor: pointer; 
 
} 
 

 

 
.work { 
 
    display: block; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg x="0px" y="0px" viewBox="0 0 792 612"> 
 
    <g> 
 
    <circle class="circle-four el" cx="37.162" cy="37.162" r="37.162"></circle>     <text class="showLink" x="100" y="85" font-family="Verdana" font-size="15" display="none"> 
 
      <a href="https://stackoverflow.com/" target="_blank" id="myprojects">Projects</a> 
 

 
    </text> 
 
    </g> 
 

 
</svg>