动画stroke-dashoffset不能关闭形状答案

【问题标题】：Animating stroke-dashoffset can't close shape动画stroke-dashoffset不能关闭形状
【发布时间】：2016-08-03 12:38:21
【问题描述】：

我正在使用 dash-offset 动画技术制作一个简单的微调器。你可以看到我有什么here。如您所见，多边形形状永远不会关闭。有什么简单的方法可以确保路径完成形状而不是将斜接角留在顶部。

我可以过度拍摄 SVG 中的路径，使其重叠以完成最后一个角落。不幸的是，您可以在动画中看到它过度绘制，这并不理想。

HTML

<div class="logo-container">
  <svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632">
    <path class="gray-path" fill="none" stroke="#9A9A9A" stroke-width="16" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3z"/>
    <path class="blue-path" fill="none" stroke="#00B3E9" stroke-width="16" stroke-miterlimit="10" d="M121.71 9.225l106.08 61.04-106.08 61.032L15.724 70.265z"/>
  </svg>
</div>

CSS

.logo-container {
  width: 400px;
  .is2-logo path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }
  .blue-path {
    animation: dash 2s linear forwards infinite;
  }
  .gray-path {
    animation: dash 2s linear forwards infinite .5s;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  50% {
    stroke-dashoffset: 0; 
  }
  100% {
    stroke-dashoffset: -1000; 
  }
}

【问题讨论】：

创建另外两条不可见的路径，除非您希望关闭路径。
是的，这是我的后备计划，但它增加了复杂性并重复了一些工作。例如，如果我希望将其放置在图像或彩色背景上，也会引起问题。我希望可能有一个更优雅的解决方案。

标签： animation svg path

【解决方案1】：

完成形状，而不是将斜接角留在顶部。

实际上它在顶部留下了对接线帽。

为什么不让蓝色路径像灰色路径一样具有圆形线帽？

.logo-container {
  width: 400px;
}
.logo-container .is2-logo path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.logo-container .blue-path {
  animation: dash 5s linear forwards infinite;
}
.logo-container .gray-path {
  animation: dash 5s linear forwards infinite .5s;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 1000;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1000;
  }
}

<div class="logo-container">
  <svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632">
    <path class="gray-path" fill="none" stroke="#9A9A9A" stroke-linecap="round" stroke-width="16" stroke-linejoin="round" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3z"/>
    <path class="blue-path" fill="none" stroke="#00B3E9" stroke-width="16" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" d="M121.71 9.225l106.08 61.04-106.08 61.032L15.724 70.265z"/>
  </svg>
</div>

【讨论】：

不幸的是，客户的标志不是四舍五入的，我假设他们会拒绝这个解决方案。不过，它很容易成为最优雅的。我正在研究使用标记开始/结束。
他们标志的哪些角不是圆角的？只是蓝色钻石的顶角？
没有一个角应该是圆形的，应该看起来像堆叠的钻石。如果我的笔有圆角导致这种混乱，我深表歉意，我自己正在摸索它，可能被意外保存了。
延长线使其到达顶角坐标是最简单的解决方案。 “你可以看到他们透支”是什么意思？你希望它看起来像什么？

【解决方案2】：

你为什么不把路径延长另一条腿，让破折号的偏移量保持不变：

  <svg class="is2-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 243.514 195.632">
    <path class="gray-path" fill="none" stroke="#9A9A9A" stroke-linejoin="round" stroke-width="16" stroke-miterlimit="10" d="M121.71 64.26l106.08 61.04-106.08 61.033L15.724 125.3 l106.08 -61.04 106.08 61.04" marker-end="url(#gray-start)"/>
    <path class="blue-path" fill="none" stroke="#00B3E9" stroke-linejoin="round" stroke-width="16" stroke-miterlimit="10" d="M121.71 9.225 l106.08 61.04 -106.08 61.032 L15.724 70.265 l106.08 -61.04 106.08 61.04"/>
  </svg>

【讨论】：