我在使用CSS控制动画svg边框时遇到了麻烦

Question

html {
  background: white;
}
div {
  position: fixed;
  height: 200px;
  width: 605px;
  position: fixed;
  left: 30%
}
.mainNav {
  position: fixed;
  top: 6;
}
[class="navBorder"] .outline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  stroke: #7272f8;
  stroke-width: 11px;
  fill: none;
}
.navBorder .outline {
  stroke-dasharray: 2000;
  stroke-dashoffset: 1900;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
.navBorder:hover .outline {
  stroke-dasharray: 1100 0;
  stroke-dashoffset: 0;
}

<div>
  <a class="navBorder" target="_blank">
    <svg height="100%" width="100%" xmlns="http://www.w3.org/2000/svg">
      <rect class="outline" height="100%" width="100%" />
    </svg>
  </a>
</div>

http://codepen.io/lorehill/pen/pepxar

问题是我似乎不能得到边界的起始位置在顶部，中心，然后关闭中心底部。

我很困惑地试图弄清楚如何计算为起始位置设置stroke-dasharray和stroke-dashoffset所需的值，以便获得我所追求的效果。

Answer 1

AFAIK中，笔画的起始位置始终是rect元素的左上方的rect的起始点。

我似乎不能得到边框的起始位置是在顶部中心然后关闭中心底部。

我认为您需要两个折线元素，尽管您可以在这两个元素上使用同一个类。

svg {
  height: 100px;
  margin: 1em;
}
.outline {
  fill: lightblue;
  stroke-dasharray: 200;
  stroke-dashoffset: 190;
  -webkit-transition: 0.5s;
  -moz-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}
svg:hover .outline {
  stroke-dasharray: 200 0;
  stroke-dashoffset: 0;
}
   

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 100 100">

  <polyline class="outline" points="50,0 100,0, 100,100 50,100" style="stroke:#660000; stroke-width: 3;" />

  <polyline class="outline" points="50,0 0,0 0,100 50,100" style="stroke:#660000; stroke-width: 3;" />

</svg>