[英]How to render dynamically generated inline SVG by using custom directive in angular 6
[英]How to render string as SVG dynamically in Angular 8
我有下面給出的帶有圖標作為 SVG 字符串的項目列表
steps=[
{
"id": 1,
"code": "ABC",
"dname": "abc",
"conveyStep": null,
"sequence": 1,
"fqcn": null,
"status": "A",
"icon": `<svg xmlns="http://www.w3.org/2000/svg" width="24.148" height="31.393" viewBox="0 0 24.148 31.393">
<defs>
</defs>
<g id="noun_Document_188541" transform="translate(-15 -5)">
<g id="Group_1821" data-name="Group 1821" transform="translate(15 5)">
<path id="Path_1051" d="M31.55 5H15v31.393h24.148V12.6zm.35 2.061l5.183 5.183H31.9V7.061zM16.2 35.185V6.208h14.5v7.244h7.244v21.733H16.208z" class="cls-1" data-name="Path 1051" transform="translate(-15 -5)"/>
<path id="Rectangle_8" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 8" transform="translate(4.83 25.355)"/>
<path id="Rectangle_9" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 9" transform="translate(4.83 18.111)"/>
<path id="Rectangle_10" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 10" transform="translate(4.83 15.696)"/>
<path id="Rectangle_11" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 11" transform="translate(13.282 13.282)"/>
<path id="Rectangle_12" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 12" transform="translate(13.282 10.867)"/>
<path id="Rectangle_13" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 13" transform="translate(4.83 20.526)"/>
<path id="Rectangle_14" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 14" transform="translate(4.83 22.941)"/>
<g id="Group_1819" data-name="Group 1819" transform="translate(13.282 18.715)">
<path id="Path_1052" d="M53.144 62.452a3.348 3.348 0 0 0 1.07-.771 1.835 1.835 0 0 0 .447-1.066h-.338a1.838 1.838 0 0 1-.61-.084.971.971 0 0 1-.381-.235.832.832 0 0 1-.2-.319 1.147 1.147 0 0 1-.057-.361.894.894 0 0 1 .311-.674 1.042 1.042 0 0 1 .733-.289 1.237 1.237 0 0 1 1.02.439 1.881 1.881 0 0 1 .356 1.216 2.287 2.287 0 0 1-.613 1.457 3.989 3.989 0 0 1-1.475 1.114z" class="cls-1" data-name="Path 1052" transform="translate(-53.078 -58.653)"/>
<path id="Path_1053" d="M61.8 62.452a3.348 3.348 0 0 0 1.07-.771 1.835 1.835 0 0 0 .447-1.066h-.338a1.838 1.838 0 0 1-.61-.084.971.971 0 0 1-.381-.235.832.832 0 0 1-.2-.319 1.147 1.147 0 0 1-.057-.361.894.894 0 0 1 .311-.674 1.042 1.042 0 0 1 .733-.289 1.237 1.237 0 0 1 1.02.439 1.881 1.881 0 0 1 .356 1.216 2.287 2.287 0 0 1-.613 1.457 3.989 3.989 0 0 1-1.475 1.114z" class="cls-1" data-name="Path 1053" transform="translate(-58.713 -58.653)"/>
</g>
<g id="Group_1820" data-name="Group 1820" transform="translate(5.428 9.056)">
<path id="Path_1054" d="M41.569 31.389a3.348 3.348 0 0 0-1.07.771 1.835 1.835 0 0 0-.447 1.066h.338a1.838 1.838 0 0 1 .61.084.971.971 0 0 1 .381.235.832.832 0 0 1 .2.319 1.147 1.147 0 0 1 .057.361.894.894 0 0 1-.311.674 1.042 1.042 0 0 1-.733.289 1.237 1.237 0 0 1-1.02-.439 1.881 1.881 0 0 1-.356-1.216 2.287 2.287 0 0 1 .613-1.457 3.989 3.989 0 0 1 1.469-1.114z" class="cls-1" data-name="Path 1054" transform="translate(-36.196 -30.962)"/>
<path id="Path_1055" d="M32.915 31.389a3.348 3.348 0 0 0-1.07.771 1.835 1.835 0 0 0-.447 1.066h.338a1.838 1.838 0 0 1 .61.084.971.971 0 0 1 .381.235.832.832 0 0 1 .2.319 1.147 1.147 0 0 1 .057.361.894.894 0 0 1-.311.674 1.042 1.042 0 0 1-.733.289 1.237 1.237 0 0 1-1.02-.439 1.881 1.881 0 0 1-.356-1.216 2.287 2.287 0 0 1 .613-1.457 3.989 3.989 0 0 1 1.475-1.114z" class="cls-1" data-name="Path 1055" transform="translate(-30.561 -30.962)"/>
</g>
</g>
</g>
</svg>`
},
{
...
}
];
...
現在我想在我的HTML中將這些SVG 字符串顯示為SVG但它沒有顯示我的 SVG
<div class="scrollmenu" id="scroll_menu">
<div class="steps" *ngFor="let step of newSteps">
<p class="completed"></p>
<p style="width:5px;margin-top:-13px;margin-left: 18px;margin-left: 37px;"><i class="fa fa-check-circle"
aria-hidden="true"></i></p>
<div class="step-image">
\\here I want to show my svg
</div>
</div>
</div>
並且我想根據某些條件為某些 svg 提供樣式,所以有什么方法可以為動態添加的 avg 提供樣式嗎? 任何幫助,將不勝感激。
所以基本上我在忽略 DomSanitizer 后遇到了安全問題,所以我去了https://angular.io/guide/security#xss並總結並更改了我的代碼以獲得我想要的。 我導入了 DomSanitizer
import { DomSanitizer} from '@angular/platform-browser';
....
newSteps=[];
constructor(private sanitizer: DomSanitizer) { }
ngOnInit() {
for (let i = 0; i < this.steps.length; i++) {
this.newSteps.push(this.sanitizer.bypassSecurityTrustHtml(this.steps[i].icon));
}
}
然后只需用戶[innerHTML]標記 html 文件
<div id="steps" class="step-image" [innerHTML]="step">
</div>
您可以創建一個指令,該指令接受 svg 字符串並將其添加到其宿主元素的 innerHTML。 然后使用該指令將樣式動態應用於內部 svg。
注意:這會繞過 Angular 的DomSanitizer ,讓您容易受到 XSS 漏洞的攻擊。 僅當您信任 svg 字符串的來源時才使用此方法。
@Directive({
selector: '[svgIcon]',
})
export class SvgIconDirective implements OnChanges {
@Input()
svg?: string;
constructor(
private _elementRef: ElementRef,
) {}
ngOnChanges(changes: SimpleChanges) {
if (changes.svg) {
this._elementRef.nativeElement.innerHTML = '';
if (this.svg) {
this._elementRef.nativeElement.innerHTML = this.svg;
}
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.