如何在angular html中动态更新SVG Image href？ [英] How to update SVG Image href dynamically in angular html?

问题描述

我正在遍历每个对象都有imageUrl的员工对象列表，我需要在svg-Image

<div *ngFor ="emp of employees">
        <defs>
         <pattern id = "attachedImage" height = "100%" width = "100%" patternContentUnits = "objectBoundingBox">
            <image href="{{emp.ImageUrl}}"  preserveAspectRatio = "none" width = "1" height = "1"/>
        </pattern>
        </defs>
        <circle cx = "50%" cy = "50%" r = "35%" fill = "url(#attachedImage)"/>
    </div>

我不想遍历JS中的所有html元素。即使我这样做，我也想映射适当的图像

I don't want to loop through all the html elements in JS. Even if I do, I want to map the appropriate image

有什么方法可以动态地在我尝试使用{{emp .ImageUrl}}无效。

Is there any way I can dynamically append that Url in this image I tried using {{emp.ImageUrl}} which didn't work.

这是工作示例的URL，其中我已硬编码了URL
https://stackblitz.com/edit/angular-pq6r2w

This is the URL of working example where I've hardcoded the URL https://stackblitz.com/edit/angular-pq6r2w

我想动态添加URL

任何建议将不胜感激！

推荐答案

标记中的问题是您对所有图案图像重复使用相同的 id 。结果，以所有形状示出了第一图像。您可以使用 ngFor 循环索引来区分每个 id ：

The problem in your markup is that you reuse the same id for all pattern images. As a result, the first image is shown in all the shapes. You can use the ngFor loop index to make each id distinct:

<div *ngFor="let emp of employees; let i = index">
  ...
  <svg class="circle-chart" ...>
    ...
    <g class="circle-chart__info">
      <defs>
        <pattern [id]="'attachedImage_' + i" ... >
          <image [attr.xlink:href]="emp.ImageUrl" ... />
        </pattern>
      </defs>
      <circle [attr.fill]="'url(#attachedImage_' + i + ')'" ... />
    </g>
  </svg>
</div>

您可以在此堆栈闪击。请注意，我还在第二个图像上设置了 https 协议，以使其在视图中可见。

You can see the result in this stackblitz. Please note that I also set the https protocol on the second image to make it visible in the view.

这篇关于如何在angular html中动态更新SVG Image href？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！