更改svg-imge中的背景顏色與其中的文字

Question

其中有一些文字的圖像。懸停時，svg會更改背景顏色，除非將其懸停在文本內部。

如何在將鼠標懸停在文字上時更改svg背景？

<svg class="svg"> 
    <polygon class="polygon" points="100,10 40,198 190,78 10,78 160,198"> 
    </polygon> 
    <text class="number" x="85" y="115">456</text> 
</svg> 

.svg { 

} 
.svg .polygon { 
    fill: red; 
} 
.svg .polygon:hover { 
    fill: blue; 
} 
.svg .number { 
    font-size: 19px; 
} 

https://jsfiddle.net/king_s/kcoetje0/

Answer 1

要做到這一點，你需要添加pointer-events: none;您<text>標籤。

CSS

.svg .number { 
    font-size: 19px; 
    pointer-events: none; /* <-- Add This */ 
} 

JSFiddle