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

マウスには無視されるように、ポインタにポインターを設定します。

ホバリングを行うにはJavaScriptが必要ないことに注意してください。ホバーはそれを行います。

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ファイルとして動作させるために追加されます。