问题描述
在我的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="http://www.w3.org/2000/svg"(...shortended...) </svg>">
使用[style.background]方法会在错误的位置创建一个空的svg元素。
解决方法
为此,您需要
- 在所述div中定义一个角度参考(例如
#svgContainer
) - 通过
ViewChild
引用该地址
- 更改
backgroundImage
我在这里提供了一个可行的解决方案(请参见app.component.ts
和app.component.html
:
https://codesandbox.io/s/sleepy-buck-r13ck?file=/src/app/app.component.ts