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？

更新

我尝试像这样使用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架构会损坏，浏览器将无法呈现SVG。使用组（这是一个有效的svg容器），我们可以避免该问题，并且可以将额外的组件html直接注入该组内部。

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

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

1 个答案: