Столкнулся с проблемой, что при анимации path
в браузере Safari оказывается нельзя использовать отрицательные значения. Как можно решить эту задачу?
Или как задается направление анимации path?
Приведу свой пример:
.svg-path {
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
#l2 {
stroke-dasharray: 341.828;
stroke-dashoffset: 0;
}
#l2.active {
animation: animationLine2 3s ease-in-out;
animation-fill-mode: forwards!important;
}
#l3 {
stroke-dasharray: 228.558;
stroke-dashoffset: 0;
}
#l3.active {
animation: animationLine3 3s ease-in-out;
animation-fill-mode: forwards!important;
}
@keyframes animationLine2 {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -341.828; // В Safary не работает
}
}
@keyframes animationLine3 {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -228.558; // В Safary не работает
}
}
<svg class="svg-path" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 479 756">
<style type="text/css">
.st0 {
fill: none;
stroke: #000;
stroke-width: 10;
stroke-miterlimit: 10;
}
</style>
<path id="l2" class="st0 active" d="M111.2,383c0,0-43.5,16.7-47.5,28.2c-2.3,10.5,4.3,17.3,37.8,26.8s49.5,17.2,49.5,17.2
c6.8,3.9,18,9.5,10.8,22.3c-15.3,17.2-29.2,27.8-29.2,27.8l-27.5,26.3c-2.7,4.7-5.3,7.4-5.8,12.3c-0.4,3.9,0.5,7.1,2.4,10.2
c1.4,2.3,3.3,4.2,5.7,5.4c0.3,0.2,0.7,0.3,1,0.5c13.3,7.8,40,11.2,40,11.2"></path>
<path id="l3" class="st0 active" d="M373,438.5c0,0-27.5,7-34,15c-3,8.8,0,11.3,3.8,14.3c7.1,5.4,15.8,11,22.3,15.5s22.8,13,26.8,16.3
s6.8,6,9.5,11.3s3.5,6.3,2,10.3s-2.5,7-9.8,11.5S370,543.3,370,543.3c-7.5,4.3-47.3,12-47.3,12"></path>
</svg>
Необходимо что б линии "вытирались" сверху вниз.