CSS标题代码动画

Question

INFO: CSS代码基本上是显示一个名字下面有一条小线，当你把鼠标悬停在它上面时，这条线开始完成一个完整的矩形。当鼠标悬停时，它会切换回名称下方的一行。

我遇到的问题是，当我尝试改变文本的大小(在矩形中)，我有很多问题，如:-矩形需要调整新的文本的高度和宽度-矩形需要重新居中(由于某些原因它没有保持居中)-当文本是类似名字的东西时:例如John Smith，当尺寸太大时，John的底部会开始接触Smith的顶部

QUESTION:我怎样才能使代码更好一点，这样当我改变文本的大小时，一切都自动适应，而不需要大量的重新调整?

    <header id="header">
      <div class="svg-wrapper">
        <svg class="svg-name" xmlns="http://www.w3.org/2000/svg">
          <rect class="shape" />
          <div class="text">John Smith</div>
        </svg>
      </div>
    </header>

CSS代码

    header {
      height: 450px;
      background-image: url(/assets/img/logo.svg), url(/assets/img/background.jpe);
      background-position: 20px 20px, bottom;
    }
    header nav {
      float: right;
      margin: 30px 30px 0 0;
    }
    header nav a {
      display: inline-block;
      margin-left: 20px;
      color: rgba(0, 0, 0, 0.7);
    }
    header nav a:hover {
      color: black;
    }
    header .svg-wrapper {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      margin: 0 auto;
      width: 360px;
    }
    header .svg-wrapper:hover .shape {
      stroke-width: 2px;
      stroke-dashoffset: 0;
      stroke-dasharray: 960;
    }
    header .svg-name {
      height: 120px;
      width: 360px;
    }
    header .shape {
      height: 120px;
      width: 360px;
      stroke-dasharray: 140 940;
      stroke-dashoffset: -674;
      stroke-width: 8px;
      fill: transparent;
      stroke: black;
      border-bottom: 5px solid black;
      transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;
    }
    header .text {
      text-transform: uppercase;
      font-size: 132px;
      line-height: 32px;
      letter-spacing: 8px;
      color: black;
      top: -100px;
      position: relative;
      text-align: center;
    }

小提琴URLhttps://jsfiddle.net/snenkov/kshawbg5/6/

CODEPEN URLhttp://codepen.io/anon/pen/MwXbVM

Answer 1

将行高改为

header .text {
   line-height:1;
}

或从"header .text"类中删除行高