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.
Page reload doesn’t work after enabled the html5mode. We have to rewrite the url and it could be easily done by using a middleware for the connect server.
If you have a sticky header (Position fixed header on the top of the html page), your anchor link with CSS ID would not work as you expected. The target section would be covered by the position fixed header.
You can use the following CSS to offset the fixed header height.
/* The target CSS ID with :before pseudo class */
.offset:before {
display: block;
content: " ";
height: 150px; /* Give height of your fixed element */
margin-top: -150px; /* Give negative margin of your fixed element */
visibility: hidden;
}
