SVG Hover Государство с несколькими элементами

Question

Добрый день всем,

Я определении SVG на моей странице со следующим defs.

<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> 

Works совершенно нормально. Я также умею стирать заполнение polygon простым CSS. Похоже, это:

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

Эффект парения не может, однако, всякий раз, когда мышь покидает polygon и вместо парит над любым из элементов «текст» в рамках svg. Есть ли способ определить правило CSS, которое предотвращает это поведение. Или, было бы лучше (проще) изменить атрибут с помощью JS/jQuery?

Спасибо!

Answer 1

Ваши тексты отображаются поверх вашего многоугольника и поэтому перехватывают события мыши. Вы должны создать правило CSS, как

text { 
    pointer-events: none; 
} 

Это позволит предотвратить текст стать объектом событий мыши, которые должны дать вам желаемый эффект при наведении на полигон.