Search code examples
svgangularangular2-template

svg <use> in Angular 2 Component seems to not work in IE11

Can anyone point me if svg <use> can work in IE 11 and how, inside of Angular 2 component?

It works fine in Chrome but does not work in IE for me.

I did include svg4everybody.js library but if I use this inside of a component template or template url, it does not work.

Please let me know what I should do. Thanks you ver much

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    	<h1>My First Angular 2 App</h1>
    	<svg viewBox="0 0 32 32" width='150' height='150' fill='pink' role='img'>
      		<use xlink:href="app/sprites.svg#splitup"/>    
        </svg>
       `
})
export class AppComponent { }

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/svg4everybody/svg4everybody.js"></script>

    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

Solution

  • Well, It's not related to IE11, supports it SVG or no. Problem is that, at the point, when svg4everybody.js is loaded and svg4everybody() method is called, your template isn't rendered in the DOM.

    So, you will need to call svg4everybody() from component's ngOnInit method. See this: Include External JavaScript Libraries In An Angular 2 TypeScript Project