帶有多個元素的SVG懸停狀態

Question

大家下午好，

我使用以下defs在頁面上定義了SVG。

<svg width="0" height="0">
    <defs>
        <g id="stroke-hexagon">
            <polygon fill="#002663" stroke="#FFFFFF" stroke-width="6" stroke-miterlimit="12" points="57.8,185 5.8,95 57.8,5 161.8,5 213.8,95 161.8,185 "/>

        </g>

        <g id="hexagon">
            <polygon fill="#006890" points="52,180 0,90 52,0 156,0 208,90 156,180 "/>
        </g>
    </defs>
</svg>

...並稍后在HTML中使用以下代碼實現：

<svg width="208px" height="180px" viewBox="0 0 208 180" >
    <use xlink:href="#hexagon"></use>
    <text class="faicon" x="50%" y="70px" fill="white" font-size="80px" text-anchor="middle">&#xf040</text>
    <text text-anchor="middle" x="50%" y="70%" fill="white">Logo Here</text>
</svg>

完全正常。 我還可以使用簡單的CSS設置polygon填充的樣式。 看起來像這樣：

#hexagon:hover polygon {
    fill:#990000;
}

但是，每當鼠標離開polygon而將鼠標懸停在svg的兩個“文本”元素上時，懸停效果都會失敗。 有沒有一種方法可以定義防止此行為的CSS規則。 或者，使用JS / jQuery更改屬性會更好（更容易）嗎？

謝謝！

Answer 1

您的文本呈現在多邊形的頂部，因此會攔截鼠標事件。 您應該設置一個css規則，例如

text {
    pointer-events: none;
}

這樣可以防止文本成為鼠標事件的目標，而鼠標事件應該會為多邊形提供所需的懸停效果。