我对SVG比较陌生。尝试实现六边形加载器，90％已经完成，但在动画六边形结束时没有完全关闭（一个小的差距仍然存在）。实际上我使用Adobe Illustrator来获取路径坐标。
链接：jsfiddle.net/srigar/fhmbqtg7/1 /
答案 0 :(得分：1)
答案 1 :(得分：1)
您可以采取几种方法。如果你不介意圆形连接，那么你可以采用@ 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>