In angular there is an issue with having base set and html5mode with svgs. It causes all things like filter: url(#url) to be rewritten as filter: url(/base/#url).
https://github.com/angular/angular.js/issues/8934
I've tried disabling html5 mode and removing the base but whenever angular bootstraps it still rewrites the url.
While angular is loading if the svg is present it will show the correct clip/filter whatever however once angular initializes it's gone. Does anyone know a workaround? I've tried using the full file path before targeting it as well as using the disabling of base.
By having base set i mean
<base href='/'> which works as it should.
Further inspection into this problem reveals that when angular is initialized it transforms the filter into an svg
<svg>
<defs>
<filter>
</filter>
</defs>
<g>
<path>
</g>
</svg>
<svg>
<defs>
<svg class='filter'>
<path>
</svg>
</defs>
<g>
<path>
</g>
</svg>
This ended up being because we had a directive named filter...
A bad mistake on our part!