我无法使用 CSS 控制动画 svg 边框答案

【问题标题】：I'm having trouble controlling an animated svg border using CSS我无法使用 CSS 控制动画 svg 边框
【发布时间】：2017-02-05 09:41:54
【问题描述】：

我一直在尝试为 svg 边框设置动画，我已经做到了这一点

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 以获得我想要的效果的值。

如果有人能像我 5 岁那样解释它，那就太好了。

谢谢！

【问题讨论】：

我会试一试，谢谢。我希望它左右均匀地旋转，末端在中间。您认为这样可以实现吗？

标签： css animation svg

【解决方案1】：

AFAIK，笔画的起始位置始终是矩形的起始点，该矩形位于 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>

Codepen Demo

【讨论】：