Question

我尝试了许多绑定SVG数据路径的尝试，但似乎没有人起作用。这是我的代码：

<div *ngFor="let icon of icons"">
    <object type="image/svg+xml" [data]="icon.path"></object>
</div>

Ts：

    public icons = [ {name: '...', path: '/svg/...svg', href: 'https://...'},..,];

我尝试使用[data]，data =“ {{...}}”等。我没有任何特别的错误，只是我无法可视化任何图像。我正在使用对象标记来动态更改“填充”属性。我试图直接在对象标签的data属性中写入路径，并且它可以正常工作。关于如何解决问题有什么想法吗？

Answer 1

attr.data呢？

<div *ngFor="let icon of icons"">
    <object type="image/svg+xml" [attr.data]="icon.path"></object>
</div>

如here所示。

编辑：

最好先清理一下路径。

<!-- COMPONENT -->

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

    @Component({
      ...
    })
    export class SvgComponent {

      private sanitizer;

      constructor(sanitizer: DomSanitizationService ) {
        this.sanitizer = sanitizer;    
      }

      svgURL(url) {
        return this.sanitizer.bypassSecurityTrustUrl(url);
      }
    }

<!-- TEMPLATE -->

    <div *ngFor="let icon of icons"">
        <object type="image/svg+xml" [attr.data]="svgURL(icon.path)"></object>
    </div>

绑定angular2 + <object> svg数据属性

1 个答案: