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

Posted 2023-03-28

【中文标题】我无法使用 CSS 控制动画 svg 边框

【英文标题】：I'm having trouble controlling an animated svg border using CSS

【发布时间】：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   xmlns="http://www.w3.org/2000/svg">
      <rect class="outline"   />
    </svg>
  </a>
</div>

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

问题是我似乎无法让边框的起始位置位于顶部中心，然后关闭中心底部。

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

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

谢谢！

【问题讨论】：

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

【参考方案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