Angular 2 组件中的 svg <use> 似乎在 IE11 中不起作用答案

【问题标题】：svg <use> in Angular 2 Component seems to not work in IE11Angular 2 组件中的 svg <use> 似乎在 IE11 中不起作用
【发布时间】：2016-09-23 16:16:02
【问题描述】：

如果 svg <use> 可以在 IE 11 中工作以及如何在 Angular 2 组件内部工作，谁能指出我？

它在 Chrome 中运行良好，但在 IE 中对我来说不起作用。

我确实包含了 svg4everybody.js 库，但如果我在组件模板或模板 url 中使用它，它就不起作用。

请让我知道我应该做什么。非常感谢你

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>

【问题讨论】：

此链接对 IE11 css-tricks.com/examples/svg-for-everybody 表示“是”

标签： svg angular angular2-template

【解决方案1】：

好吧，它与IE11无关，是否支持SVG。问题是，此时，当 svg4everybody.js 加载并调用 svg4everybody() 方法时，您的模板不会在 DOM 中呈现。

因此，您需要从组件的 ngOnInit 方法中调用 svg4everybody()。看到这个：Include External JavaScript Libraries In An Angular 2 TypeScript Project

【讨论】：

谢谢大卫，如果是这样，我会调查并告诉你。
初始化 svg4everybody 时实际上并不重要。即使在页面加载时，也很好。初始化后，它将在后台运行一段时间，因此之后添加到 DOM 的任何内容都将被处理。

【解决方案2】：

在 IE10、IE11 上不受支持。但是内联 svg 会起作用。因此，您应该依靠模块将符号作为独立 svg 导入 dom。

您可以使用该模块：https://github.com/arkon/ng-inline-svg 使用 IE11 的 [forceEvalStyles]="true" 参数。

此库不适用于 IE10，可能原因是 innerHTML 不适用于带有 SVG 内容的 IE10。

垫片可用（我没有在 IE10 上测试 ng-inline-svg）

【讨论】：

【解决方案3】：

除了 David Gabrichidze anwser，还可以通过 npm install 添加 svg4everyone。

npm install --save svg4everybody

在 angular.json 中添加脚本

...
"scripts": ["./node_modules/svg4everybody/dist/svg4everybody.js"]
...

然后在 app.component.ts 中这样使用：

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

declare const svg4everybody: any;

@Component({
  selector: 'app-root',
  template: ''
})
export class AppComponent implements OnInit {

  ngOnInit(): void {
    // IE 11 external svg support
    svg4everybody();
  }
}

【讨论】：