Текст анимации SVG не отображается - PullRequest
Новая
       13

Текст анимации SVG не отображается

0 голосов
/ 05 марта 2019

возможно, это простое исправление, которое я просматриваю, но текст внутри 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>

Также я должен отметить, что это React SPA с webpack и sass, конфигурация webpack не должна быть проблемой, так как у меня настроены загрузчик файлов, sass-loader, node-sass и css-loader

...