SVG clip-path doesn’t work in html5mode

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


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.