angular - 动态 SVG 组件

Question

我想实现一个动态绑定(bind) svg 文件的组件，并将其内容加载到组件模板中。

目前，我尝试过这种方式:

icon.component.ts

...

@Component({
    selector: 'app-icon',
    template: `
        <div [innerHTML]="svgTemplate">
        </div>
    `,
})
export class IconComponent implements OnInit {
    @Input() name: string;

    private svgTemplate: string;

    constructor(
        private http: Http
    ) { }

    ngOnInit() {
        this.http.get(`assets/icon/ic_${this.name}.svg`).map(response => response.text()).subscribe(svg => {
            this.svgTemplate = svg;
        });
    }
}

但是 svg 内容似乎被转义了(模板 div 中没有出现任何内容)。

这是一个内容 svg 示例:

<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 viewBox="0 0 52.4 44.1" style="enable-background:new 0 0 52.4 44.1;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#444444;}
</style>
<g>
    <g transform="translate(312, 312)">
        <path class="st0" d="M-259.6-312H-312v6.4h52.4V-312z"/>
    </g>
    <g transform="translate(312, 312)">
        <path class="st0" d="M-259.6-293.1H-312v6.4h52.4V-293.1z"/>
    </g>
    <g transform="translate(312, 312)">
        <path class="st0" d="M-259.6-274.3H-312v6.4h52.4V-274.3z"/>
    </g>
</g>
</svg>

Answer 1

Angular 自动清理 HTML based on its security rules如果来源可能不受信任。许多 SVG 可能正在清理，包括样式规则。

如果您信任 svg 的来源，您可以使用 DomSanitizer 绕过它。请注意，这使您可能容易受到注入(inject)攻击，但由于您控制为 svg 提供服务的服务器，因此与从您无法控制的源中检索它相比，风险要小一些。然而，这并不意味着没有风险。

import { DomSanitizer } from '@angular/platform-browser';

this.svgTemplate = this.domSanitizer.bypassSecurityTrustHtml(svg);