svg 셰이프와 svg 텍스트를 병합하는 방법

Question

svg 셰이프와 svg 텍스트를 병합하는 데 문제가 있습니다. 이것은 내 현재 코드입니다. 흰색 막대는 포인터가 상자에있을 때만 회색으로 바뀌지 만 글자 위에 있으면 상자가 흰색으로 바뀝니다. 텍스트와 상자에서 포인터를 옮길 때까지 마우스가 텍스트 위에 있더라도 회색으로 유지되도록하려면 어떻게해야합니까? 나는 <g>, <a>, <svg> 태그에 함수를 넣으려고했지만 간단히 작동하지 않습니다.

<script> 
    function ontop(x){ 
     x.style.fill = "#c8cace" 
    } 

    function notOnTop(x){ 
     x.style.fill = "white" 
    } 
</script> 

    <svg> 
    <g> 
     <a href="https://google.com" target="_blank" > 
     <rect height="50px" width="350px" x="70%" y="14%" fill="white" rx="5px" onmouseenter="ontop(this)" onmouseleave="notOnTop(this)" /> 
     <text x="72%" y="22%" font-size="20" fill="black" >Google</text> 
     </a> 
    </g> 
    </svg> 

Answer 1

텍스트에 마우스로 무시할 수 있도록 pointer-events : none 텍스트를 지정하십시오.

호버링을 수행 할 때는 javascript가 필요하지 않습니다. CSS를 가리키면 마우스가 올려집니다.

rect { 
 
    fill: white; 
 
} 
 

 
rect:hover { 
 
    fill: #c8cace; 
 
}

<svg> 
 
    <g> 
 
     <a href="https://google.com" target="_blank" > 
 
     <rect height="50px" width="350px" x="70%" y="14%" rx="5px" /> 
 
     <text x="72%" y="22%" font-size="20" fill="black" pointer-events="none">Google</text> 
 
     </a> 
 
    </g> 
 
</svg>

Answer 2

텍스트를 직사각형 뒤로 이동하십시오. 그리고 사각형을 반투명하게 만드십시오.

<svg width="5cm" height="4cm" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <script> 
    function ontop(x){ 
     x.style.fill = "#c8cace" 
    } 

    function notOnTop(x){ 
     x.style.fill = "white" 
    } 
    </script> 
    <g> 
     <a href="https://google.com" target="_blank" > 
     <text x="72%" y="22%" font-size="20" fill="black" >Google2</text> 
     <rect height="50px" width="350px" x="70%" y="14%" fill="white" rx="5px" opacity="0.5" 
     onmouseenter="ontop(this)" onmouseleave="notOnTop(this)"/> 
    </a> 
    </g> 
</svg> 

EDIT1

SVG 네임 스페이스는 독립형 SVG 파일을 작동하도록 추가됩니다.