I am working on an AngularJS project with html5mode enabled. I would like to implement the Card Expansion effect written on Codrops. Everything works fine but the SVG clip-path animation doesn’t work.

This is because i have ended the <base> tag in the index.html for the html5mode so the clip-path value has to be an absolute path. i.e.

<!-- fail with base tag -->
<image clip-path="url(#clipPath1)" width="1920" height="500" xlink:href="a.jpg"></image>

Change to

<!-- it works! -->
<image clip-path="url(http://localhost:10000/project#clipPath1)" width="1920" height="500" xlink:href="a.jpg"></image>

If you want it to work on IE, please refer to the post in the reference.

Done =)

Reference: StackOverflow – Svg clipPath in AngularJS app with url in hashbang mode