Question

我使用虚线偏移动画技术制作一个简单的微调器。你可以看到我有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; 
  }
}

Answer 1

完成形状而不是将斜角放在顶部。

实际上它将对接线放在顶部。

为什么不让你的蓝色路径像灰色的那样有圆形线帽？

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

Answer 2

为什么不用另一条腿延长路径，让短划线偏移相同：

＆＃13;

  <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>

＆＃13;

动画描边 - dashoffset不能关闭形状

2 个答案: