An issue arises in Angular when using a base set and html5mode with SVGs. This causes things like filter: url(#url) to be rewritten as filter: url(/base/#url).
https://github.com/angular/angular.js/issues/8934
Disabling html5 mode and removing the base did not resolve the issue, as Angular still rewrites the URL upon bootstrapping.
When Angular is loading, the SVG displays correctly with the clip/filter effect, but once Angular initializes, it disappears. Is there a workaround for this problem? Attempts have been made by using the full file path before targeting it, as well as disabling the base element.
By "having base set" I mean
<base href='/'>, which functions as intended.
Further investigation into this issue reveals that Angular transforms the filter into an SVG during initialization.
before angular
<svg>
<defs>
<filter>
</filter>
</defs>
<g>
<path>
</g>
</svg>
after bootstrap
<svg>
<defs>
<svg class='filter'>
<path>
</svg>
</defs>
<g>
<path>
</g>
</svg>