Ändern Hintergrundfarbe in svg-imge mit Text darin

Question

Bild mit etwas Text drin. Beim Schweben ändert sich die Hintergrundfarbe des Svg, außer wenn der Mauszeiger über den darin enthaltenen Text bewegt wird.

Wie kann ich den Svg-Hintergrund ändern, wenn ich den Mauszeiger über den Text halte?

<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

Um dies zu erreichen, müssen Sie pointer-events: none; zu Ihrem <text> Tag hinzuzufügen.

CSS

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

JSFiddle