Angular：组件应该产生 SVG 的一部分

Question

Angular 组件通常会生成 HTML。 如果我试图让他们生成 SVG，它会失败，因为它不知道 SVG 标签。 似乎只有结果在里面时才知道它们。但这里不是这种情况 - 在父组件中。

https://stackblitz.com/edit/angular-ivy-cbyf99?file=src/app/app.component.ts

我的组件应该生成 SVG 的一部分。 我怎样才能让它发挥作用？

Answer 1

在子组件中使用 SVG 元素

SVG 元素、<circle>、<rect> 等将无法自行识别，因为没有父 <svg> 元素。您可以通过在它们前面加上 svg 来解决这个问题，即：<svg:circle> 或 <svg:rect>

子组件选择器

您不能为子组件使用普通的 Angular 组件，因为它会将相应的元素插入到 DOM 中，这会干扰 SVG 渲染（即：下面的 <mycircle>）：

要解决这个问题，请更改选择器，使其包含在方括号中：

selector: '[mycircle]'

然后您可以像使用指令一样使用它，并将其分配给父级中的 svg <g> 元素：

<svg>
  <g mycircle />
</svg>

Stackblitz：https://stackblitz.com/edit/angular-ivy-qvnvwe?file=src%2Fapp%2Fapp.component.ts