动画笔画dashoffset无法关闭形状

我正在使用虚线偏移动画技术制作一个简单的微调框。你可以看到我有什么here。正如你所看到的，多边形的形状从不关闭。是否有任何简单的方法可以确保路径完成形状，而不是将顶部的斜角切掉。动画笔画dashoffset无法关闭形状

我可以在拍摄的路径诠释他的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; 
    } 
}

来源

2016-04-12 Lee Williams

创建其他两个路径是除了一段短暂的时间段之外，当你想要关闭路径时，它们是不可见的。 –

这是我的后备计划，但它增加了复杂性，并重复了一些努力。它也会导致问题，例如，如果我希望这放在图像或彩色背景上。我希望可能有更优雅的解决方案。 –

完成的形状，而不是在顶部离开斜切角落。

其实它是在顶部留下对接线帽。

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

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

来源

2016-04-12 18:52:56

不幸的是，客户标识不是圆形的，我假设他们会拒绝这个解决方案。尽管这是最优雅的。我正在调查使用标记开始/结束。 –

他们徽标的哪个角落没有圆角？只是蓝钻石的顶角？ –

没有一个角落应该是圆形的，应该看起来像堆积的钻石。道歉，如果我的笔圆角导致这种混乱，我正在自己周围，并可能保存在意外。 –

你为什么不只是另一条腿延伸的路径，留下几许偏离相同：

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

来源

2016-04-13 00:14:10

动画笔画dashoffset无法关闭形状

回答

相关问题