我们可以在 SVG 模板中渲染 Angular 组件吗？

Question

看到我们可以将我们的模板文件保存为.svg而不是.html现在，我想我可以制作可以如下使用的 svg 组件。

main.component.svg

<svg>
    <my-svg-component></my-svg-component>
</svg>

mySvg.component.svg

<text x="0" y="60">test text</text>

我收到一个错误，说<text></text>不是一个可识别的元素，所以我将其修改为

<svg:text x="0" y="65">test text</svg:text>

错误消失了，但没有渲染。我将脚本直接添加到文件中的<svg>标签中，main.component.svg而没有svg:开头，效果很好。

我应该在mySvg.component模板中做些什么来使其作为可重用组件工作，还是我们必须在一个模板中生成所有 SVG？

更新

我试过<foreignObject>像这样使用 SVG

<svg>
    <foreignObject>
        <my-svg-component></my-svg-component>
    </foreignObject>
<svg>

这也不起作用。我用段落标签对其进行了测试，并注意到我必须使用<xhtml:p>它才能呈现。我尝试将xhmtl:部件添加到我的组件中以获得咧嘴笑和傻笑，但仍然没有看到任何渲染。现在我想知道是否有angular:某种形式可以使用。

Answer 1

你可以这样做：

模板：

<svg>
  <g svgtext></g>
</svg>

svg 组件：

import { Component } from '@angular/core';

@Component({
  selector: '[svgtext]',
  template: `<svg:text x="0" y="65">test text</svg:text>`,
  styles: [`your styles come here`]
})
export class HelloComponent  {

}

所以诀窍是通过属性选择器将您的 svg 组件附加到另一个 svg 元素（组 - g）。这样生成的模板是有效的 SVG，您可以渲染文本。

请参见此处：https : //stackblitz.com/edit/angular-fd1tcd

如果您使用标签进行组件选择器，那么 SVG schmema 就会损坏，浏览器将无法呈现 SVG。使用 group（这是一个有效的 svg 容器）我们避免了这个问题，并且额外的组件 html 被注入到这样一个组中。

您可以阅读 Tero（现在已经很老）的这篇精彩文章以获取更多见解：https : //teropa.info/blog/2016/12/12/graphics-in-angular-2.html