svg-imgeの背景色をテキストで変更します。

Question

画像の中にテキストがいくつかあります。ホバリング時に、svgはその中にあるテキストの上をホバーするときを除いて背景色を変更します。

テキストをまたぐときにsvg-backgroundを変更するにはどうすればよいですか？

<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

これを達成するために、あなたはあなたの<text>タグにpointer-events: none;を追加する必要があります。

CSS

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

JSFiddle