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

我想在其中的形状和文本上应用一个简单的鼠标悬停。在本例中，当指针位于形状或文本上方时，应该更改填充的颜色。我认为，如果文本在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;
        }
      }
    }

这是我的建议：

将悬停效果应用于svg not.a

svg{ 过滤器：下拉式阴影0px 0px 10px rgba0,0,0.2； } svg.a{ 过渡：在0.5s内轻松过渡； } svg：悬停{ 填充：绿色； 光标：指针； } 你好

---

我这样做了，但是指针：光标位于svg元素所占据的整个区域上，这远远超出了图像本身，因为您没有设置svg的大小。您应该设置这个元素的宽度和高度。我添加了svg大小，但它没有改变任何东西。指针在整个svg区域上仍然可见，而不是在路径上。我想您希望我将svg缩小，问题是我有几个元素，请看这里：，它们都有不同的大小，最大的一个几乎等于viewbox。我希望它们具有相同的viewbox以保持相对尺寸。是否有任何方法可以使文本可悬停，并且除路径外，视图框不可悬停？有两个问题：Css没有prev元素选择器，所以当我悬停文本元素时，你不能说嘿Css，用红色填充路径元素。第二个问题是文本元素被放置在路径元素之上。当您悬停文本时，路径会失去悬停效果。您可以添加指针事件：无；发短信。该元素对于所有操作都是透明的。

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