Css 悬停效果未应用于NavLink中嵌套的SVG

如何使嵌套的SVG具有与锚定标记相同的悬停效果？当我将鼠标悬停在一个实体上时，这两个实体都应该改变，但现在它们并不被视为同一个实体。

我正在尝试将一种样式应用于悬停的SVG。SVG嵌套在NavLink组件中。特定于类的CSS应用于SVG，但SVG嵌套的a标记的悬停仅应用于a标记的文本。我试着只使用react路由器dom中的Link组件。我注意到，当我从CSS中删除

文本装饰：none

时，下划线只适用于文本。在呈现的HTML中，a标记嵌套svg标记

我曾尝试将锚定标记和SVG包装在一个跨度中，并给跨度以悬停效果，但没有成功

组成部分

import {Link, NavLink} from "react-router-dom";
import logo from '../../assets/LogoOnly_Square_Transparent.png';
import { ReactComponent as CalculatorIcon } from '../../assets/calculator.svg';
import './header.styles.scss';

export const Header = () => {

    return (
        <nav className="header">
            <div className='options'>
                <Link className='logo-container' to='/'>
                    <img src={logo} alt="Logo" className='logo'/>
                </Link>
                <NavLink to='/calculator' className='header-option'>CALCULATOR<CalculatorIcon className='link-icon'/></NavLink>
            </div>
            <div className='options-right'>
                <Link to='/sign-in-sign-up' className='header-option'>SIGN IN</Link>
            </div>

        </nav>
    )

}

---

你的问题有一个问题-毫无疑问。我想问题是，如何让悬停效果在嵌套SVG上工作？考虑编辑你的问题，包括作为注释添加的问题。许多人没有阅读评论。

  border-bottom: 1px solid #D1D3D4;
  height: 70px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  padding: 5px;

  .options {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;

    .logo-container {
      width: 70px;
      margin: 5px 0;
      height: 100%;
      .logo {
        height: 100%;
      }
    }
      .header-option {
        padding: 10px 15px;
        font-size: 16px;

        .link-icon {
          height: 13px;
          fill: #58595B;
          margin: auto 5px;
        }
        &:hover {
          color: #4FB47C;
          fill: #4FB47C;
        }

      }
  }
  a {
    text-decoration: none;
    color: #58595B;

    &:hover {
      color: #4FB47C;
      fill: #4FB47C;
    }
  }
  .options-right {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .header-option {
      padding: 10px 15px;
    }
  }
}