Svg 未在 Angular2 应用程序内呈现答案

【问题标题】：Svg isn't rendered inside the Angular2 appSvg 未在 Angular2 应用程序内呈现
【发布时间】：2016-01-15 12:29:53
【问题描述】：

我发现在 angular2 应用程序中简单粘贴的 SVG 没有被渲染。

我在 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-seed 应用程序构建的，我的问题是：在应用程序中渲染 simple svg（不是指令，不是某种插值等）出现问题的原因是什么？是角度 DOM 操作问题还是其他问题？我该如何解决？

附：当然，首先，我计划构建一个 'svg-icon' 指令，并使用它使用 type 属性来渲染不同类型的 SVG 图标。但是渲染失败了，然后我想出了这个简单的代码。

你可以看到here的例子，因为不幸的是我还不能用fiddle或plunker构建一个angular2例子。

【问题讨论】：

There's an open issue 关于它
我的浏览器控制台显示错误系统未定义。您是否错过了某个地方的 js 包含？

标签： angular svg

【解决方案1】：

2.0.0-alpha.46 (2015-11-11) 解决了这个问题（见changelog）。从那以后它工作正常。

plnkr.

【讨论】：