Svg不在Angular2應用內呈現

我發現一個簡單的粘貼在angular2應用中的SVG並未呈現。Svg不在Angular2應用內呈現

我有這樣的代碼中的index.html：

<body> 
    <p>SVG outside the application:</p> 
    <svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <rect x="10" y="10" height="100" width="100" 
      style="stroke:#ff0000; fill: #0000ff"/> 
    </svg> 
    <app>Loading...</app> 

    <!-- inject:js --> 
    <!-- endinject --> 

    <script> 
    System.import('bootstrap') 
     .catch(function (e) { 
     console.error(e, 
      'Report this error at https://github.com/mgechev/angular2-seed/issues'); 
     }); 
    </script> 

</body>

和內部app.html這個簡單的代碼：

<p>SVG inside the application:</p> 
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <rect x="10" y="10" height="100" width="100" 
     style="stroke:#ff0000; fill: #0000ff"/> 
</svg>

這個例子是建立與angular2種子的應用，我的問題是，：在應用程序內部渲染簡單svg（不是指令，不是某種內插等）時出現問題的原因是什麼？它是一個角度的DOM操作問題還是別的？我該如何解決它？

P.S.當然，首先，我計劃構建一個'svg-icon'指令並使用它來使用type屬性呈現不同類型的SVG圖標。但渲染失敗，然後我想出了這個簡單的代碼。

示例，您可以看到here，因爲不幸的是我還不能用小提琴或撬塊構建angular2示例。

來源

2015-10-16 punov

[有一個未解決的問題]（https://github.com/angular/angular/issues/4506）關於它 –

我的瀏覽器控制檯顯示錯誤系統未定義。你錯過了包括某個地方的js嗎？ –

2.0.0-alpha.46 (2015-11-11)解決了這個問題（見changelog）。從那以後它工作正常。

plnkr。

來源

2016-04-27 08:43:34

Svg不在Angular2應用內呈現

回答

相關問題