svg <use>角2のコンポーネントがIE11で動作しないようです

svg <use>がIE 11でどのように動作することができますか？svg <use>角2のコンポーネントがIE11で動作しないようです

Chromeでは問題なく動作しますが、Internet Explorerでは動作しません。

私はsvg4everybody.jsライブラリを含んでいましたが、コンポーネントテンプレートまたはテンプレートURLの内部でこれを使用すると動作しません。

私は何をすべきか教えてください。おかげであなた版くらい

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

 
@Component({ 
 
    selector: 'my-app', 
 
    template: ` 
 
    \t <h1>My First Angular 2 App</h1> 
 
    \t <svg viewBox="0 0 32 32" width='150' height='150' fill='pink' role='img'> 
 
     \t \t <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>

出典

2016-05-25 John

（私はIE10に彼らとNG-インラインSVGをテストしていない）可能です：// CSS -tricks.com/examples/svg-for-everybody/ – John

まあ、それはIE11に関連していないが、SVG、または全くそれをサポートしています。問題は、その時点で、svg4everybody.jsがロードされ、svg4everybody（）メソッドが呼び出されたときに、テンプレートがDOMにレンダリングされないということです。

したがって、コンポーネントのngOnInitメソッドからsvg4everybody（）を呼び出す必要があります。参照：Include External JavaScript Libraries In An Angular 2 TypeScript Project

出典

2016-05-27 15:53:11

Davidさん、ありがとうございました。私はそれを調べて、それが正しいかどうかをお知らせします。 – John

これは正解です。再度ありがとう – John

あなたは歓迎して、楽しんでください。 –

はIE10、IE11ではサポートされていません。しかし、インラインsvgは動作します。したがってシンボルをdomにスタンドアロンのsvgとしてインポートするモジュールに頼るべきです。

モジュールを使用することができます。https://github.com/arkon/ng-inline-svg IE11のパラメータは[forceEvalStyles]="true"です。

このライブラリはIE10では動作しません。理由はおそらくinnerHTMLがSVGコンテンツのIE10で動作しないためです。

シムは、IE11のhttpsに、このリンクはそう言う

出典

2017-01-25 05:05:57

svg <use>角2のコンポーネントがIE11で動作しないようです

答えて

関連する問題