如何在Angular中将SVG渲染为URL引用而不是使用SVG对象本身?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (50)

我目前在url中有一个SVG,我想通过HTML在Angular中呈现。因为我试图渲染SVG的块是for循环,我试图通过URL引用动态渲染SVG,如下所示:

我们的应用程序有AngularJS和Angular6,我能够使用带有ng-attr-data =“svgUrl”的object标签通过AngularJS端的url渲染SVG。我尝试了使用较新语法的img标签和对象标签的不同组合,但我无法像AngularJS那样进行渲染。

<div class="row checkout-items mb-3" *ngFor="let item of orderSummaryModel.items">
    //For rendering PNG, works fine
    <img *ngIf="!item.color.imageFeatured.includes('mockupSvg')" class="product-image img-fluid" [src]="item.color.imageFeatured" nopin="nopin">      
    //Trying to render SVG here via url 
    <object *ngIf="item.color.imageFeatured.includes('mockupSvg')" [attr.xlink:href]="item.color.imageFeatured" type="image/svg+xml"></object>
</div>

预期的结果是SVG渲染,其中item.color.imageFeatured是SVG URL。它当前显示为空白,带有一个空的#document,尽管SVG url在浏览器中单独打开时呈现正常。

提问于
用户回答回答于

<object>元素没有xlink:href属性。

我想你可能意味着:

<object *ngIf="item.color.imageFeatured.includes('mockupSvg')"
        [data]="item.color.imageFeatured" type="image/svg+xml"></object>

扫码关注云+社区

领取腾讯云代金券