1

Столкнулся с проблемой, что при анимации 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>

Необходимо что б линии "вытирались" сверху вниз.

1 ответ 1

2

Отрицательные отступы действительно не работают в Safari.

Эту проблему можно решить двумя способами:
1. Перерисовать path, чтобы начало path было с другого конца линии и тогда не понадобиться отрицательные отступы stroke-dashoffset, чтобы поменять направление рисования линии.
2. Второй способ проще, но сложнее для понимания Чтобы использовать только положительные значения stroke-dashoffset нужно изменять значение от двойного максимума длины линии до одинарного,

то есть вместо:

@keyframes animationLine2 {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -341.828; // В Safary не работает
  }
}

написать условие:

@keyframes animationLine2 {
  0% {
    stroke-dashoffset: 683.65;
  }
  100% {
    stroke-dashoffset: 341.828; // **В Safary  работает**
  }
}

.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: 683.65;
  }
  100% {
    stroke-dashoffset: 341.828; // В Safari  работает
  }
}

@keyframes animationLine3 {
  0% {
    stroke-dashoffset: 457.11;
  }
  100% {
    stroke-dashoffset: 228.558; // В Safari  работает
  }
}
<svg class="svg-path" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="50%" height="50%" 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>

3
  • Спасибо. Ещё где-то прочитал, может кому пригодиться, что если путь не очень сложный (не мой вариант) то можно в Illustrator повернуть его на 180градусов Commented 30 янв. 2020 в 16:34
  • 1
    @BlackStar1991 так я это написал в самом начале, только поворачивание поможет, если фигура абсолютно симметрична, а иначе форма уже будет не та, зеркальная. Вот именно перерисовать поможет, а именно поменять начальную точку с концом. Commented 30 янв. 2020 в 16:38
  • можно еще отразить масштабированием scale(1,-1) Commented 31 янв. 2020 в 7:28

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.