Angular 14：动态 SVG 组件渲染元素，但在屏幕上不可见

Question

我正在开发一个应用程序，该应用程序解析SVG并将其保存为JSON对象，该对象可以使用我创建的自定义组件动态渲染。尽管一切正常，我可以在检查器中看到所有元素，但由于某种原因，屏幕上没有显示任何内容。我最初在angular 9中创建了这个，当时它很有效，但当我在angular 14中重新创建它时，事情并不像以前那样工作。

当我创建它时，我们必须将svg:添加到元素的开头，并且我的自定义组件必须是<svg:g my-component>才能工作。我记得有一个更新消除了对svg:部分的需求，但现在我想知道我们现在是否需要对最新版本的Angular做一些新的技巧。

到目前为止，我设置svg模板的方式是这样的。

svg生成器模板

<svg xmlns="http://www.w3.org/2000/svg">
<style type="text/css" *ngIf="GlobalStyling !== ''" [innerHtml]="insertStyles()"></style>
<defs>
<symbol #symbolShell [attr.id]="SvgData.graphicId" [attr.viewBox]="GraphicViewBox">
<svg-component *ngFor="let item of SvgData.elements" [ElementData]="item"></svg-component>
</symbol>
</defs>

<svg preserveAspectRatio="xMidYMid meet">
<use [attr.xlink:href]="SymbolLink" />
</svg>
</svg>

svg组件模板

<svg>
<g *ngIf="TemplateType === 'single element'" [innerHtml]="insertElement()"></g>
<g #graphicContainer *ngIf="TemplateType == 'group element'">
<svg-component *ngFor="let item of ElementData.subElements" [ElementData]="item"></svg-component>
</g>
<linearGradient #graphicContainer *ngIf="TemplateType === 'linear gradient'">
<svg-component *ngFor="let item of ElementData.subElements" [ElementData]="item"></svg-component>
</linearGradient>
<radialGradient #graphicContainer *ngIf="TemplateType === 'radial gradient'">
<svg-component *ngFor="let item of ElementData.subElements" [ElementData]="item"></svg-component>
</radialGradient>
<symbol #graphicContainer *ngIf="TemplateType === 'linear gradient'">
<svg-component *ngFor="let item of ElementData.subElements" [ElementData]="item"></svg-component>
</symbol>
</svg>

为了自己进行实验，你可以在这里填写以下内容的表格。

1.转到位于svg-builder文件夹中的demo.svg文件，并将代码粘贴到svg input中(我最初在这里粘贴了代码，但它超过了30k个字符的限制(

2.向title和graphic id输入中添加您想要的任何内容

3.对于viewbox设置，输入x=0 y=0 width=144 height=144

4.在Global Styling输入中粘贴此代码

.st0{fill:#0038A8;}
.st1{fill:#141414;}

5.向下滚动并单击submit按钮

6.滚动弹出的JSON下方，然后单击Build SVG按钮

完成此操作并查看检查器的elements选项卡后，您将看到所有内容都在浏览器中呈现，只是不会显示在屏幕上。我试着修改了我上面提到的一些旧的渲染方法，但似乎什么都不起作用。有人知道为什么会发生这种情况以及我们需要做什么吗？

Answer 1

好吧，经过一番挖掘，我找到了一个有效的解决方案。在svg-component中，我需要定义类似的选择器

@Component({
selector: 'svg:g[svg-component]',
...
})

当我使用模板中的组件时，我必须执行<svg:g svg-component>...</svg:g>，并且一切都按预期进行。