ValentinFunk

Snippet to fix SVG issues in Angular (2+) with Safari, Firefox and Chrome

This listens to Angular route changes and on route change does the following:

1. Replaces the link in <use xlink:href="#some-id"></use> by a path prefixed version
2. Replaces the fill property in referenced SVGs by a path prefixed version
3. Replaces the style in <svg style="fill: url(#gradient)"> with a prefixed version

Adapted from Gist by Leon Derijke

iffa

export class AppModule {
  constructor(private router: Router, private viewportScroller: ViewportScroller) {
    // Disable automatic scroll restoration to avoid race conditions
    this.viewportScroller.setHistoryScrollRestoration('manual');
    
    this.handleScrollOnNavigation();
  }

  /**
   * When route is changed, Angular interprets a simple query params change as "forward navigation" too.