Проблема с clip-path: url(#foo)

Нужна помощь!

Начал разбираться со свойством ‘clip-path’. Оно пока мало поддерживается браузерами. Полноценно только -webkit-браузерами. Поддержка Firefox имеется, но только через “external-link” - clip-path: url(#foo) и описании svg в html. У меня возникла проблема реализации именно последним способом:

Вот реализация через clip-path в css (работает только на -webkit-):
Ссылка на Codepen

Захотел сделать тоже самое только через external-link для поддержки Firefox, описал те же polygon в svg и меня ничего не работает, в чем именно я допустил ошибку?
второй вариант на Codepen

Знаю, что будут проблемы с transition со второй реализацией, но это лучше чем ничего!

Заранее спасибо за помощь!

Координаты неправильно написали во втором случае:
<polygon points='0 0, 1 0, 0.9 0.9, 0.1 0.9'/>
<polygon points='0.1 0.1, 0.9 0.1, 0.9 0.9, 0.1 0.9'/>

Спасибо!