Видимо нет https://caniuse.com/#search=clipPath
Но, зачем тут svg? Когда можно анимировать через @keyframes свойство width у блока? Суть таже самая.
Добавили overflow: hidden и дело с концом
Да для этого случая можно, но пример для примера. В реальности там более сложная анимация для path (лень копировать было полный пример, суть то та же). С кучей элементов. Там морфинг логотипа одного в другой, текст только часть его. Поэтому css анимацией не обойтись. Я так понял, что проблема видимо не в clipPath а в animate. Именно c ней у ie (edge) проблема: https://caniuse.com/#search=SMIL
Так как clipPath как раз работает в edge, ie не проверял: https://jsfiddle.net/jz67xryf/1/
Придется для ie отдельно что-то простое придумать, типа opacity. Как еще с калекой поступить.
Максим Тимофеев, Ну я думаю проще всё это убрать в сторону и воспользоваться библиотекой для анимирования. anime.js, svg.js и другие. Можно очень легко, в несколько строк кода сделать анимирование одного элемента в другой. Думаю, с логотипом тоже не будет проблем. Нужно будет просто указать изначальные координаты и конечные, всё. Библиотека сама всё сделает за вас. Я бы поступил так. Это займёт меньше времени и позволит без труда изменить что-то в будущем
Средний
