Question

如果svg <use>可以在IE 11中工作以及如何在Angular 2组件中工作，那么有人能指出我吗？

它在Chrome中运行良好但在我的IE中无效。

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

请告诉我应该怎么做。非常感谢你

＆＃13;

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 { }

＆＃13;

<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>

＆＃13;

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"参数。

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

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

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

2 个答案: