<object>のSVGは、IEの角2コンポーネントには表示されていません。

<object>タグの埋め込みSVGは、IE 11およびEdgeでは表示されません。彼らはinnerHTML（ "SVG no supported"）のみを、タグをまったくサポートしないかのように表示します。

ただし、Angularコンポーネントと組み合わせて使用しない場合は、埋め込みSVGを表示します。doこれはAngularのshadowRootエミュレーションと関係があると思います。（IE doesn't support Shadow DOM yet）<object>のSVGは、IEの角2コンポーネントには表示されていません。

IE 11でIE 10エミュレーションを有効にすると、SVGが適切に表示されます。

ソースコード： http://plnkr.co/edit/ZKRIMans0qgXVyRkjKcP?p=preview

app.component.ts

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    template: '<object data="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg" type="image/svg+xml">SVG not supported</object>' 
}) 
export class AppComponent { }

main.ts：

import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from './app.component'; 

bootstrap(AppComponent);

のindex.html：

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

    <!-- 1. Load libraries --> 
    <!-- IE required polyfills, in this exact order --> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script> 
    <script src="https://npmcdn.com/[email protected]/es6/dev/src/testing/shims_for_IE.js"></script> 

    <script src="https://code.angularjs.org/2.0.0-beta.9/angular2-polyfills.js"></script> 
    <script src="https://code.angularjs.org/tools/system.js"></script> 
    <script src="https://npmcdn.com/[email protected]/lib/typescript.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.9/Rx.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.9/angular2.dev.js"></script> 

    <!-- 2. Configure SystemJS --> 
    <script> 
     System.config({ 
     transpiler: 'typescript', 
     typescriptOptions: { emitDecoratorMetadata: true }, 
     packages: {'app': {defaultExtension: 'ts'}} 
     }); 
     System.import('app/main') 
      .then(null, console.error.bind(console)); 
    </script> 
    </head> 

    <!-- 3. Display the application --> 
    <body> 
    <my-app>Loading...</my-app> 
    </body> 
</html> 


<!-- 
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that 
can be found in the LICENSE file at http://angular.io/license 
-->

出典

2016-03-18 ComFreek

Visual Studioのようなプロジェクトを実行しているとき、または実際のサーバーにコードを公開しているときに、Plunkerを使用しているときに作業していないようです。

出典

2016-04-17 19:17:06

いいえ、ローカルアプリでも問題が発生していますが、Plunkerで話していることも確認できます。 –

<object>のSVGは、IEの角2コンポーネントには表示されていません。

答えて

関連する問題