SVG Clip-Path не работает в Safari

У меня есть простая анимация, которая заполняет svg снизу вверх, а затем исчезает. Заполнение производится с помощью clipPath наряду с использованием path с помощью stroke-dasharray & stroke-dashoffset.



Проблема в том, что clipPath, похоже, полностью игнорируется в Safari. Я видел много других примеров и ответов на вопросы, которые успешно используют свойство clip-path в Safari, но не в этом случае.



Есть какие-нибудь идеи о том, что конкретно мешает Safari правильно отрисовывать это?



Ссылка на JSFiddle: https://jsfiddle.net/7qzf4c4j/1/ 






.pen {

  -webkit-clip-path: url(#logoclip);

  clip-path: url(#logoclip);

  stroke-dasharray: 60 60;

  stroke-dashoffset: 60;

  -webkit-animation: fill-logo 2.7s infinite linear;

  animation: fill-logo 2.7s infinite linear;

}



@keyframes fill-logo {

  0% {

    stroke-dashoffset: 60;

    opacity: 1;

  }

  50% {

    stroke-dashoffset: 0;

    opacity: 1;

  }

  75% {

    stroke-dashoffset: 0;

    opacity: 1;

  }

  90% {

    stroke-dashoffset: 0;

    opacity: 0;

  }

  100% {

    stroke-dashoffset: 0;

    opacity: 0;

  }

 }

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-305 397.9 70 60.1" enable-background="new -305 397.9 70 60.1">

  <defs>

    <clipPath id="logoclip">

      <path d="m-270 397.9c-22.9 11.5-35 25.4-35 40.3 0 5.9 1.8 10.9 5.3 14.4 3.4 3.5 11-3.7 2.7-2.3 4.2-5.6 4.2-9.1v-8.6c0-1-.3-2.1-.9-3-1 .5-2 .8-2.9.8-1.4 0-2.4-.8-2.4-1.8 0-1 .9-1.7 2.3-1.7 1.2 0 2.3.6 3.2 1.7.3-.2.6-.4.9-.6-1.5-1.4-2.3-2.9-2.3-4.1 0-1.1.7-1.8 1.7-1.8.4 0 .8.2 1.2.5.3-.3.7-.5 2.7-2.3 4.1.3.2.6.4.9.6.9-1.1 2.1-1.7 3.2-1.7 1.3 0 2.3.7 2.3 1.7 0 1-1 1.8-2.4 1.8-1 0-1.9-.3-2.9-.8-.6.9-.9 2-.9 3v8.6c0 7.2 6.7 12.8 15.2 12.8 5.6 0 10.3-1.9 13.7-5.4 3.4-3.5 5.3-8.5 5.3-14.4 0-14.8-12.1-28.8-35-40.3"/>

    </clipPath>

  </defs>

  <path class="pen" d="m-270,458 l0,-60.1" stroke="black" stroke-width="100" />

</svg>
808   2  

2 ответов:

Бен, мое предложение, вероятно, выглядит забавно, но удалите -webkit-clip-path:url(#logoclip); из вашего .pen. Хранить только clip-path:url(#logoclip); (Без -webkit-).

В моем Safari 10.1.1 это делает трюк.

3  
2017-07-03 03:00:43

Кош указал на главную проблему с этим кодом, но еще одна вещь, которая вызвала у меня большую головную боль,-это проект, над которым я работаю, имеет тег base, который по-разному обрабатывается в Safari при ссылке на URL-адреса для clip-путей.

Этот вопрос хорошо описывает его: использование базового тега на странице, содержащей элементы маркера SVG, не позволяет отобразить маркер

В качестве ссылки я исправил это, используя существующий угловой.директива js уже инкапсулирует svg для наблюдения за расположение и обновление url-адреса между переходами, например: 

// manually replace url of svg to circumvent base href
var pen = element.find('.pen')[0];
scope.$watch(function() {
  return location.href;
}, function(newVal, oldVal) {
  pen.style.clipPath = 'url('+newVal+'#logoclip)';
});

Вывод тогда становится примерно таким: 

clip-path: url(http://localhost:3000/page#logoclip);

EDIT: я также думал, что, возможно, причина -webkit-clip-path не работала, потому что она требовала полного пути, но я попытался установить свойство с помощью кода выше, и он все еще не отображает путь клипа должным образом. Я предполагаю, что это ошибка конкретно с -webkit-clip-path, хотя если у кого-то есть какая-либо информация, мне было бы интересно узнать, почему это происходит.

1  
2017-06-26 15:10:23

Comments

    Ничего не найдено.
Click here to cancel reply.