SVG动画文字未显示

Question

可能是我正在查看的一个简单修复程序，但是我的SVG动画中的文本没有显示，而且我似乎无法弄清楚为什么

目的是为导航栏链接提供悬停时的边框动画，并且当边框动画起作用时，文本不会显示

.nav-wrapper{
    display: flex;
    flex-direction: row;
    background: colors(gradient);
    padding: 25px 55px;

    h1 {
        font-family: "Pacifico"
    }

    .nav-menu {
        list-style-type: none;
        font-family: text(mainText);
        display: flex;
        flex-direction: row;
        position: absolute;
        right: 100px;
        top: 75px;
        padding: 0;
    }

        .svg-wrapper {
          position: relative;
          top: 50%;
          transform: translateY(-50%);
            margin: 0 auto;
          width: 320px;  
        }
        .shape {
          stroke-dasharray: 140 540;
          stroke-dashoffset: -474;
          stroke-width: 8px;
          fill: transparent;
          stroke: #00e5ff;
          border-bottom: 5px solid black;
          transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
        }
        .text {
          font-family: 'Roboto Condensed';
          font-size: 22px;
          line-height: 32px;
          letter-spacing: 8px;
          color: #fff;
          top: -48px;
          position: relative;
        }
        .svg-wrapper:hover .shape {
          stroke-width: 2px;
          stroke-dashoffset: 0;
          stroke-dasharray: 760;
        }   
}

<div className="nav-menu">
  <div class="svg-wrapper">
    <svg height="60" width="320"                    xmlns="http://www.w3.org/2000/svg">
      <rect class="shape" height="60" width="320" />
      <a class="text">ZACH SAUCIER</a>
    </svg>
   </div>
</div>

我还要注意，这是一个带有webpack和sass的React SPA，webpack配置应该不是问题，因为我已经配置了文件加载器，sass-loader，node-sass和css-loader