Анимация штриховки-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 не может закрыть форму

ответ

Смежные вопросы