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

Question

谁能告诉我 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>

Answer 1

嗯，这与IE11无关，是否支持SVG。问题是，此时，当加载 svg4everybody.js 并调用 svg4everybody() 方法时，您的模板未在 DOM.

中呈现

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

Answer 2

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

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

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

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

Answer 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();
  }
}

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

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

svg

angular2-template

angular