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应用内呈现

回答

相关问题