渲染 SVG 的嵌套指令

【问题标题】：Nest directives that render SVG渲染 SVG 的嵌套指令
【发布时间】：2015-11-19 13:42:54
【问题描述】：

我创建了一个渲染 SVG 的组件，效果很好。但是，我想将该 SVG 的一部分包含在一个单独的组件中。但是，当我这样做时，内部的 SVG 不会被渲染——我猜测（对 SVG 不太了解）是由于组件的标签不是有效的 SVG 元素。

可以在this Plnkr 中看到一个示例。 inner-svg-example 内的文本不显示。但是，当您在开发者工具中编辑页面并删除 inner-svg-example 指令时，它会显示出来。

由于 Angular 2 已弃用指令中的 replace 选项，解决此问题的最佳方法是什么？

【问题讨论】：

注意：我使用 Angular 2 是因为我想使用它，所以不使用它不是一个选项。我也没有使用 D3，因为生成的 SVG 不是数据的再现。我希望能够以声明方式声明 SVG 的结构，因此 Raphael.js 也不是一个选项。
我不确定这一点，但它可能与github.com/angular/angular/issues/1632 相关。如果这不能回答您的问题，您应该创建一个问题。
感谢 Eric，这确实是我的用例。我想“不可操作”意味着他们不会支持它。
@Vincent This blog post 可能会帮助你

标签： angular svg

【解决方案1】：

而不是使用元素选择器

<inner-svg-example></inner-svg-example>

在g等一些有效的svg标签上将其用作属性选择器解决了它

<g inner-svg-example></g>

此外，还需要在应该添加的 svg 元素前面指定 svg:，在您的情况下是

<text>...</text>

到

<svg:text>...</svg:text>

基于this blog post
在@John's answer 的帮助下解决另一个类似问题
Demo Plnkr

您的 plnkr 使用早期版本的 angular2，change log 来支持 svg

【讨论】：

请注意，命名空间“svg:”可能是必需的，否则 Angular 不会将该元素识别为 SVG 元素并抛出错误只有 void 和外部元素可以自封闭“xy”（例如路径）在你身上。