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градусов 30 янв 2020 в 16:34
  • 1
    @BlackStar1991 так я это написал в самом начале, только поворачивание поможет, если фигура абсолютно симметрична, а иначе форма уже будет не та, зеркальная. Вот именно перерисовать поможет, а именно поменять начальную точку с концом. 30 янв 2020 в 16:38
  • можно еще отразить масштабированием scale(1,-1) 31 янв 2020 в 7:28

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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