如何合併SVG形狀與svg文本

我試圖合併svg文本與SVG形狀的問題。這是我當前的代碼，當我的指針在框中時，白條僅變爲灰色，但當它位於該字母上時，該框變白。我如何使它保持灰色，即使我的鼠標位於文本上，直到我將指針從文本和框中移開。我試過把這些功能放在<g>，<a>,<svg>標籤中，但它根本不起作用。如何合併SVG形狀與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>

來源

2017-10-05 Lee Jing Yong

爲文本指定屬性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>

來源

2017-10-05 15:31:17

將矩形後面的文本移動。並使矩形半透明。

<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文件。

來源

2017-10-05 15:17:00 swatchai

似乎沒有工作，但添加感謝試圖幫助 –

SVG命名空間。現在它應該工作。在Google Chrome，MS Edge上測試。 – swatchai

@LeeJingYong如果你描述爲什麼它不起作用以及你如何使用它，這將是有幫助的。最初，它作爲嵌入式SVG運行良好，但不是作爲獨立的。 – swatchai

如何合併SVG形狀與svg文本

回答

相關問題