当鼠标悬停在 svg 项目中的文本上时，悬停在 svg 上不起作用

Question

我想在其中的形状和文本上应用一个简单的悬停。当指针位于形状或文本上时，它应该更改颜色（在本例中为填充）。我认为如果文本在 svg 元素内部，悬停也将应用于它。除非它不是。

我不擅长 svg，事实上，这是我第一次与他们合作。试图在这里和谷歌中找到答案，但没有任何问题适用于我的问题。请帮忙。

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 170">
      <path class="a" fill={funnels[funnel].bgColor} d="M378.24,59.8l33.39,88.73a11.82,11.82,0,0,0,11.07,7.66h54.6a11.82,11.82,0,0,0,11.07-7.66L521.76,59.8a11.82,11.82,0,0,0-11.07-16H389.31A11.82,11.82,0,0,0,378.24,59.8Z"></path>
      <text x="50%" y="60%" dominant-baseline="middle" text-anchor="middle" font-family="Lato" font-size="2rem" fill="#f2f2f2"> Hello </text>
    </svg>


svg {
      filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2));

      .a {
        transition: all ease-in 0.5s;

        &:hover {
          fill: darken(red, 10%);
          cursor: pointer;
        }
      }
    }

这是我的小提琴：https://jsfiddle.net/Madzik/bkbgf1os/

Answer 1

将悬停效果应用于svg 而不是.a。

svg {
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2));

  .a {
    transition: all ease-in 0.5s;
  }

  &:hover {
    fill: darken(red, 10%);
    cursor: pointer;
  }
}

svg {
  filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.2));
}

svg .a {
  transition: all ease-in 0.5s;
}

svg:hover {
  fill: green;
  cursor: pointer;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 170">
  <path class="a" fill={funnels[funnel].bgColor} d="M378.24,59.8l33.39,88.73a11.82,11.82,0,0,0,11.07,7.66h54.6a11.82,11.82,0,0,0,11.07-7.66L521.76,59.8a11.82,11.82,0,0,0-11.07-16H389.31A11.82,11.82,0,0,0,378.24,59.8Z"></path>
  <text x="50%" y="60%" dominant-baseline="middle" text-anchor="middle" font-family="Lato" font-size="2rem" fill="#f2f2f2"> Hello </text>
</svg>