我正在尝试使按钮在动画 svg 徽标上工作，当您将鼠标悬停在它上面时，文本会平滑地变形为按钮，但似乎悬停事件与按钮事件重叠，我无法在没有 JS 的情况下以简单的方式使它们一起工作.我尝试为按钮使用透明的 img 映射区域，但出现了同样的问题。我想有一些方法可以用伪元素做到这一点，我一直在研究这种方式，但我还没有想出来。
那么如何让它们都起作用呢？
<style>
.header {
display: flex;
margin: auto;
border: 1px solid grey;
width: 100%;
height: 100px;
}
.wrapper {
display:flex;
position: relative;
margin: auto;
border: 1px solid grey;
width: 570px;
height: 100px;
z-index: 10;
}
#EMPWR {
fill: #1a1a1a;
transition: all 0.3s ease-in-out;
z-index: 10;
stroke: #ff000000;
stroke-width: 15%;
}
#EMPWR:hover {
d: path("M 8.4304,2.1351 8.4044,2.1351 8.4044,3.7244 8.4285,3.7244 8.4285,5.764 8.4044,5.764 8.4044,7.7353 8.4311,7.7353 8.4311,10 0,10 0,0 8.4304,0 8.4304,2.1351 M 15.6924,0.0304 17.2484,0 21.3097,0 21.3097,10 18.779,10 18.779,9.9619 16.8291,10 14.5384,10 12.5921,9.9619 12.5921,10 10.0614,10 10.0614,0 14.1252,0 15.6924,0.0304 M 31.7363,0 C 31.7419,0 31.7461,0.266 31.7489,0.7981 C 31.7517,1.3302 31.7531,2.0873 31.7531,3.0696 C 31.7531,4.0791 31.7516,4.8681 31.7485,5.4366 C 31.7455,6.005 31.7408,6.2892 31.7346,6.2892 C 31.7318,6.2892 31.729,6.2892 31.7262,6.2892 C 31.7262,7.5261 31.7262,8.7631 31.7262,10 C 28.9066,10 26.087,10 23.2674,10 C 23.2674,6.6667 23.2674,3.3333 23.2674,0 C 26.0904,0 28.9133,0 31.7363,0 M 27.1282,0.0213 C 27.724,0.0213 28.1423,0.0208 28.3834,0.0198 C 28.6244,0.0187 28.7449,0.0174 28.7449,0.0158 C 28.7449,0.0142 28.6403,0.0129 28.4311,0.0118 C 28.2219,0.0107 27.8286,0.0102 27.251,0.0102 C 26.9577,0.0102 26.6644,0.0102 26.3711,0.0102 C 26.3711,0.0139 26.3711,0.0176 26.3711,0.0213 C 26.6235,0.0213 26.8759,0.0213 27.1282,0.0213 M 36.3313,0.0317 37.8778,0 40.8022,0 42.3526,0.0242 43.4104,0 46.3302,0 46.3191,10 41.0957,10 39.3417,9.9685 37.5946,10 32.3508,10 32.3397,0 35.2747,0 36.3313,0.0317 M 57.1935,0 C 57.1983,-0 57.2019,0.0819 57.2044,0.2456 C 57.207,0.4093 57.209,0.7128 57.2105,1.1562 C 57.2121,1.5996 57.2129,2.1396 57.2129,2.7763 C 57.2129,3.3311 57.2123,3.8097 57.2111,4.2121 C 57.2099,4.6146 57.2083,4.9409 57.2062,5.191 C 57.2049,5.3502 57.2031,5.482 57.2008,5.5866 C 57.2026,5.7096 57.204,5.8324 57.2048,5.9553 C 57.2054,6.0372 57.2062,6.2125 57.2073,6.481 C 57.2083,6.7496 57.2091,6.9567 57.2094,7.1023 C 57.2119,8.0682 57.2144,9.0341 57.2169,10 C 56.0531,10 54.8892,10 53.7254,10 C 53.1748,9.9949 52.6242,9.9898 52.0737,9.9847 C 51.8645,9.9827 51.678,9.9815 51.5143,9.9809 C 51.2915,9.9801 51.0391,9.9797 50.7572,9.9797 C 50.6662,9.9797 50.5753,9.9797 50.4843,9.9797 C 50.4843,9.9865 50.4843,9.9932 50.4843,10 C 49.4497,10 48.4152,10 47.3806,10 C 47.3806,6.6667 47.3806,3.3333 47.3806,0 C 50.6516,0 53.9225,0 57.1935,0 M 57.1898,4.0518 C 57.1905,4.0518 57.1918,4.0064 57.1939,3.9154 C 57.1949,3.8745 57.1957,3.7699 57.1964,3.6016 C 57.197,3.4334 57.1973,3.2401 57.1973,3.0218 C 57.1973,2.699 57.1968,2.4511 57.1958,2.2783 C 57.1948,2.1055 57.1929,2.0191 57.19,2.0191 C 57.1878,2.0191 57.1855,2.0191 57.1833,2.0191 C 57.1833,2.6967 57.1833,3.3743 57.1833,4.0518 C 57.1854,4.0518 57.1876,4.0518 57.1898,4.0518 " );
fill: #131313;
z-index: 10;
stroke: #ff000000;
stroke-width: 15%;
transition: all 0.3s ease-in-out;
}
button {
width: 10em;
position: absolute;
left: 57%;
bottom: 15%;
background-color: red;
border: none;
cursor: pointer;
}
</style>
<div class="header">
<div class="wrapper">
<svg id="headersvg", viewBox="0 0 57.216917 10" >
<path id="EMPWR"
d="M 8.281,2.1351 3.0969,2.1351 3.0969,3.7244 7.9059,3.7244 7.9059,5.764 3.0969,5.764 3.0969,7.7353 8.4311,7.7353 8.4311,10 0,10 0,0 8.281,0 8.281,2.1351 M 15.6924,6.0846 17.2484,0 21.3097,0 21.3097,10 18.779,10 18.779,2.3738 16.8291,10 14.5384,10 12.5921,2.3738 12.5921,10 10.0614,10 10.0614,0 14.1252,0 15.6924,6.0846 M 28.4038,0 C 29.5225,0 30.3604,0.266 30.9175,0.7981 C 31.4745,1.3302 31.7531,2.0873 31.7531,3.0696 C 31.7531,4.0791 31.4495,4.8681 30.8424,5.4366 C 30.2353,6.005 29.3088,6.2892 28.0628,6.2892 C 27.4989,6.2892 26.935,6.2892 26.3711,6.2892 C 26.3711,7.5261 26.3711,8.7631 26.3711,10 C 25.3365,10 24.302,10 23.2674,10 C 23.2674,6.6667 23.2674,3.3333 23.2674,0 C 24.9795,0 26.6917,0 28.4038,0 M 27.1282,4.2633 C 27.724,4.2633 28.1423,4.1598 28.3834,3.9529 C 28.6244,3.746 28.7449,3.4811 28.7449,3.1583 C 28.7449,2.8445 28.6403,2.5784 28.4311,2.3602 C 28.2219,2.1419 27.8286,2.0327 27.251,2.0327 C 26.9577,2.0327 26.6644,2.0327 26.3711,2.0327 C 26.3711,2.7763 26.3711,3.5198 26.3711,4.2633 C 26.6235,4.2633 26.8759,4.2633 27.1282,4.2633 M 36.3313,5.5982 37.8778,0 40.8022,0 42.3526,5.5908 43.4104,0 46.3302,0 44.1258,10 41.0957,10 39.3417,3.704 37.5946,10 34.5645,10 32.3397,0 35.2747,0 36.3313,5.5982 M 52.5307,0 C 53.4857,-0 54.2156,0.0819 54.7203,0.2456 C 55.2251,0.4093 55.6321,0.7128 55.9413,1.1562 C 56.2506,1.5996 56.4052,2.1396 56.4052,2.7763 C 56.4052,3.3311 56.2869,3.8097 56.0503,4.2121 C 55.8137,4.6146 55.4883,4.9409 55.0743,5.191 C 54.8104,5.3502 54.4486,5.482 53.9891,5.5866 C 54.3571,5.7096 54.6253,5.8324 54.7934,5.9553 C 54.9071,6.0372 55.0718,6.2125 55.2877,6.481 C 55.5035,6.7496 55.6478,6.9567 55.7205,7.1023 C 56.2193,8.0682 56.7181,9.0341 57.2169,10 C 56.0531,10 54.8892,10 53.7254,10 C 53.1748,8.9814 52.6242,7.9627 52.0737,6.9441 C 51.8645,6.5484 51.678,6.2915 51.5143,6.1733 C 51.2915,6.0186 51.0391,5.9413 50.7572,5.9413 C 50.6662,5.9413 50.5753,5.9413 50.4843,5.9413 C 50.4843,7.2942 50.4843,8.6471 50.4843,10 C 49.4497,10 48.4152,10 47.3806,10 C 47.3806,6.6667 47.3806,3.3333 47.3806,0 C 49.0973,0 50.814,0 52.5307,0 M 51.7872,4.0518 C 51.9281,4.0518 52.201,4.0064 52.6057,3.9154 C 52.8104,3.8745 52.9775,3.7699 53.1071,3.6016 C 53.2367,3.4334 53.3015,3.2401 53.3015,3.0218 C 53.3015,2.699 53.1992,2.4511 52.9945,2.2783 C 52.7899,2.1055 52.4056,2.0191 51.8417,2.0191 C 51.3893,2.0191 50.9368,2.0191 50.4843,2.0191 C 50.4843,2.6967 50.4843,3.3743 50.4843,4.0518 C 50.9186,4.0518 51.3529,4.0518 51.7872,4.0518 ">
</path>
</svg>
<button class="button-navigation" onclick="showContent()">Projects</button>
</div>
</div>
如果整个字母区域都可以用作按钮，那就太完美了。
似乎代码片段不适用于问题代码，所以这里是草稿的链接： https://codepen.io/Nickonimus/pen/mdzJLoP