我们可以在 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>

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

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

更新

我尝试像这样使用 SVG 的 <foreignObject>

<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。使用组（这是一个有效的 svg 容器）我们避免了这个问题，并且额外的组件 html 被直接注入到这样的组中。

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