Question

我对SVG比较陌生。尝试实现六边形加载器，90％已经完成，但在动画六边形结束时没有完全关闭（一个小的差距仍然存在）。实际上我使用Adobe Illustrator来获取路径坐标。

链接：jsfiddle.net/srigar/fhmbqtg7/1 /

Answer 1

只需将stroke-linecap:round;添加到您的蓝色路径。

避免不匹配是尖锐的＆amp;圆边为两条路径添加stroke-linejoin: round;

Answer 2

您可以采取几种方法。如果你不介意圆形连接，那么你可以采用@ demonofthemists的方法。

但在我展示其他方法之前，我将清理你的道路。它使用15个路径命令来制作六边形。你应该只需要6.此外它最后还有一个迷失的“-0”，什么都不做。我也清理了CSS。最后，你的路径长度只有245.68，所以300的破折号数组太长了，因此你没有看到ease-in-out动画计时的效果。

这是清理过的样本。

.loader path {
  stroke-width: 10;
  fill: none;
}

.loader #fill {
  stroke:#4C83C4;
  stroke-dasharray: 246;
  animation: dash 5s ease-in-out infinite;
}
.loader #border {
  stroke:#d6d5d5;
}
.loader svg {
  width: 600px;
  height: 300px;
  display: block;
  margin: 0 auto;
  margin-bottom: 40px;
  opacity: 0.5;
  position: relative;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 246;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<div class="loader">
  <svg viewBox="0 -10 97.59 119.306">
    <g>
      <path id="border"
            d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 z"/>
      <path id="fill"
            d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 z"/>
    </g>
  </svg>
</div>

<label>Author: SRIGAR</label>

好的，解决方案。

<强> 1。 “方形”线帽和面具

您可以切换到方形线帽而不是圆形，但这会导致帽子延伸到六边形外面。你可以通过使用面具来解决这个问题。

.loader path {
  stroke-width: 10;
  fill: none;
}

.loader #fill {
  stroke:#4C83C4;
  stroke-dasharray: 246;
  stroke-linecap: square;
  animation: dash 5s ease-in-out infinite;
  mask: url(#loader-mask);
}
.loader #border {
  stroke:#d6d5d5;
}
.loader svg {
  width: 600px;
  height: 300px;
  display: block;
  margin: 0 auto;
  margin-bottom: 40px;
  opacity: 0.5;
  position: relative;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 246;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<div class="loader">
  <svg viewBox="0 -10 97.59 119.306">
    <defs>
      <mask id="loader-mask">
        <rect width="100%" height="100%" fill="black"/>
        <path d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 z"
              stroke="white"/>
      </mask>
    </defs>
    <g>
      <path id="border"
            d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 z"/>
      <path id="fill"
            d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 z"/>
    </g>
  </svg>
</div>

<label>Author: SRIGAR</label>

不幸的是，这在路径的开头并不好看。

<强> 2。使用掩码

扩展路径的结尾

另一种方法是避开线帽，而只是将路径的末端延伸过起点。当然，这会使线条更长，所以你需要使dash数组值更大。我们仍然需要使用掩码，因此我们只能看到我们想要保留的行扩展部分。

.loader path {
  stroke-width: 10;
  fill: none;
}

.loader #fill {
  stroke:#4C83C4;
  stroke-dasharray: 250;
  animation: dash 5s ease-in-out infinite;
  mask: url(#loader-mask);
}
.loader #border {
  stroke:#d6d5d5;
}
.loader svg {
  width: 600px;
  height: 300px;
  display: block;
  margin: 0 auto;
  margin-bottom: 40px;
  opacity: 0.5;
  position: relative;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 250;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<div class="loader">
  <svg viewBox="0 -10 97.59 119.306">
    <defs>
      <mask id="loader-mask">
        <rect width="100%" height="100%" fill="black"/>
        <path d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 z"
              stroke="white"/>
      </mask>
    </defs>
    <g>
      <path id="border"
            d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 z"/>
      <path id="fill"
            d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 l-38.8,-22.6"/>
    </g>
  </svg>
</div>

<label>Author: SRIGAR</label>

因此，有一些技巧可以帮助您入门。如果你想要你可以变得更加漂亮 - 例如，如果你想要一个垂直的开始/结束连接，那么你可以使用几个蒙版并将动画分成两部分来实现。但是我现在要把事情简单化，以避免让这个答案太混乱。

<强>更新

第3。更整洁的开始和结束

.loader path {
  stroke-width: 10;
  fill: none;
}

.loader #fill-left,
.loader #fill-right {
  stroke:#4C83C4;
  animation: dash 5s ease-in-out infinite;
}

.loader #fill-left {
  stroke-dasharray: 254;
  mask: url(#left-mask);
}

.loader #fill-right {
  stroke-dasharray: 168 254;
  mask: url(#right-mask);
}

.loader #border {
  stroke:#d6d5d5;
}
.loader svg {
  width: 600px;
  height: 300px;
  display: block;
  margin: 0 auto;
  margin-bottom: 40px;
  opacity: 0.5;
  position: relative;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 254;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<div class="loader">
  <svg viewBox="0 -10 97.59 119.306">
    <defs>
      <mask id="left-mask">
        <rect width="100%" height="100%" fill="black"/>
        <path d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 z"
              stroke="white"/>
        <rect x="43.3" width="100%" height="100%" fill="black"/>
      </mask>
      <mask id="right-mask">
        <rect width="100%" height="100%" fill="black"/>
        <path d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 z"
              stroke="white"/>
        <rect width="43.3" height="100%" fill="black"/>
      </mask>
    </defs>
    <g>
      <path id="border"
            d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 z"/>
      <path id="fill-left"
            d="M46.8,6 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 l-38.8,-22.6"/>
      <path id="fill-right"
            d="M8,69.8 L43.3,90.3 L78.6,69.8 V28.6 l-38.8,-22.6"/>
    </g>
  </svg>
</div>

<label>Author: SRIGAR</label>

工作原理。

如上所述，为了让整洁者开始和结束，我们必须将面具分成两半。一个用于左半部分，以便我们可以扩展起始线（就像我们对结束线所做的那样）并使起点垂直。第二个是我们可以像前面那样扩展终点线。

为清楚起见，她是左面罩的样子。

.loader path {
  stroke-width: 10;
  fill: none;
}

.loader svg {
  width: 600px;
  height: 300px;
}

<div class="loader">
  <svg viewBox="0 -10 97.59 119.306">
    <rect width="100%" height="100%" fill="black"/>
    <path d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 z"
          stroke="white"/>
    <rect x="43.3" width="100%" height="100%" fill="black"/>
  </svg>
</div>

这是正确的面具。

.loader path {
  stroke-width: 10;
  fill: none;
}

.loader svg {
  width: 600px;
  height: 300px;
}

<div class="loader">
  <svg viewBox="0 -10 97.59 119.306">
    <rect width="100%" height="100%" fill="black"/>
    <path d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 z"
          stroke="white"/>
    <rect width="43.3" height="100%" fill="black"/>
  </svg>
</div>

如果我们移除遮罩并使填充线变得半透明，您可以看到它们如何安排使用遮罩。

.loader path {
  stroke-width: 10;
  fill: none;
  stroke-opacity: 0.5;
}

.loader #fill-left,
.loader #fill-right {
  stroke:#4C83C4;
  animation: dash 5s ease-in-out infinite;
}

.loader #fill-left {
  stroke-dasharray: 254;
}

.loader #fill-right {
  stroke: red;
  stroke-dasharray: 168 254;
}

.loader #border {
  stroke:#d6d5d5;
}
.loader svg {
  width: 600px;
  height: 300px;
  display: block;
  margin: 0 auto;
  margin-bottom: 40px;
  opacity: 0.5;
  position: relative;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 254;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

<div class="loader">
  <svg viewBox="0 -10 97.59 119.306">
    <g>
      <path id="border"
            d="M43.3,8.1 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 z"/>
      <path id="fill-left"
            d="M46.8,6 L8,28.6 v41.2 L43.3,90.3 L78.6,69.8 V28.6 l-38.8,-22.6"/>
      <path id="fill-right"
            d="M8,69.8 L43.3,90.3 L78.6,69.8 V28.6 l-38.8,-22.6"/>
    </g>
  </svg>
</div>

SVG动画在最后没有正常关闭（小差距仍然存在）

2 个答案: