class Menu extends React.Component {
render() {
return(
<div classname="collapse navbar-collapse" id="navbarSupportedContent">
<div classname="navbar-nav m-auto">
<div classname="nav-item" >
<a classname="nav-link" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24"><path d="M3 4v16h18V4H3zm16 14H5V8h14v10z"/></svg>
LINK
</a>
</div>
</div>
</div>
);
}
}
class Navbar extends React.Component {
render() {
return (
<div classname="navbar navbar-expand-lg navbar-light" style={{background: "whitesmoke",height:"90px" }}>
<a classname="navbar-brand" href="#" style={{padding: "0"}}>
<div style={{display: "flex",width: "auto",height: "100px"}}>
<div style={{display: "block",height: "100px",width: "80px"}}>
<img src="https://img.icons8.com/dusk/64/000000/cat-profile.png" width="80px" height="80px" alt="" />
</div>
<div style={{display: "block",paddingTop: "20px" }}>
<span style={{display: "flex",fontSize: "24px",marin: "0px",textAlign: "center"}}>BRAND</span>
<span style={{display: "flex",fontSize: "12px",color: "blue",textAlign: "center",padding: "0 2px" }}>Brand Tagline Here</span>
</div>
</div>
</a>
<button classname="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span classname="navbar-toggler-icon"></span>
</button>
<Menu />
</div>
);
}
}
ReactDOM.render(
<Navbar />,document.getElementById('content')
);<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<head>
<body>
<div id="content">
<a href="https://icons8.com/icon/49574/profile">Profile icon by Icons8</a></div>
</body>
<html>
我正在通过CDN使用react和bootstrap，我想在导航链接之前有一个包含svg图像的导航栏。悬停时如何在svg上添加填充颜色？
我创建了导航栏作为组件，菜单包装器作为组件，但是我想将svg和相应的导航菜单一起填充