将在代码中创建未从服务器获取的SVG附加到有角度的元素上避免变得“不安全”

如何解决将在代码中创建未从服务器获取的SVG附加到有角度的元素上避免变得“不安全”

在我的angular 10应用程序中，我正在使用一个库（svg.js）在客户端中创建一个svg（尽管我认为我的问题与所使用的库无关）。

    let svg = SVG().size(this.widthpx,this.heightpx).svg(); //returns an svg,//although I treat it as any in typescript because I do not kNow any better

创建svg后，我想显示它。理想情况下，将其作为div的背景图片，但我可以将其设置为<img>的src。

我该怎么做？ 我尝试使用此处描述的方法：Angular dynamic background images

<div [style.background]="svg"></div>

我还尝试了以下方法，如下所示：Change img [src] dynamically

<img id='other' [src]="svg">
<img id='other' src={{svg}}>

由于我对打字稿和角度都不陌生，我的猜测是，我这方面存在逻辑错误。我可能无法将某些svg-like-variable设置为background / src，但是需要以某种方式进行处理？给它一个URI？将其转换为特定类型？

我知道，svgjs库在其对象上具有attachTo（）方法。由于这种情况超出了人们的理解范围，并且无法让我做自己想做的一切，所以我想把事情掌握在自己手中。

我还可以描述不起作用的地方。据我所知，使用src={{svg}} or [src]="svg" 几乎可行。但是src是“不安全的”。

<img _ngcontent-dgo-c96="" id="other" src="unsafe:<svg xmlns=&quot;http://www.w3.org/2000/svg&quot;(...shortended...) </svg>">

使用[style.background]方法会在错误的位置创建一个空的svg元素。

解决方法

为此，您需要

1. 在所述div中定义一个角度参考（例如#svgContainer）
2. 通过ViewChild
引用该地址
3. 更改backgroundImage

我在这里提供了一个可行的解决方案（请参见app.component.ts和app.component.html：

https://codesandbox.io/s/sleepy-buck-r13ck?file=/src/app/app.component.ts