是否有可能在 SVG fill=url(#) 中使用动态 id答案

【问题标题】：Is there a possibility to use a dynamic id in SVG fill=url(#)是否有可能在 SVG fill=url(#) 中使用动态 id
【发布时间】：2022-01-22 04:38:23
【问题描述】：

我正在创建一个 svg 图标来填充来自 linearGradient 的颜色百分比。

在 linearGradient 中，我正在动态创建 id，并希望在

中使用相同的动态创建的 id

我尝试了插值填充={url(#linear${i})}，但它不起作用，不确定这是否是在 SVG 中使用的正确方法。

有没有更好的方法来实现这一点？

<div *ngFor="let block of filteredBlocks; let i = index">
    <svg xmlns="http://www.w3.org/2000/svg"
         height="100px"
         viewBox="0 0 24 24"
         width="100px"
         fill="url(#'linear' + i)">
      <defs>
        <linearGradient [attr.id]="'linear' + i">
          <stop [attr.offset]="block.percent + '%'" stop-color="green"/>
          <stop [attr.offset]="(100 - block.percent) + '%'" stop-color="white"/>
        </linearGradient>
      </defs>
     <path d="M0 0h24v24H0V0z" fill="none" />
     <path d="M17 4h3v16h-3V4zM5 14h3v6H5v-6zm6-5h3v11h-3V9z" />
    </svg>
  </div>

【问题讨论】：

标签： html css angular svg linear-gradients

【解决方案1】：

有不同的方法可以让它工作：

对属性绑定使用插值
```
attr.fill="url(#linear{{i}})"
```
在属性绑定上使用字符串连接
```
[attr.fill]="'url(#linear' + i + ')'"
```

【讨论】：

【解决方案2】：

将其封装在原生 JS Web 组件中，所有现代浏览器都支持，

如果您使用 shadowDOM，则不需要唯一 ID
如果您不想要 shadowDOM，请坚持 new Date()/1 以强制使用新的唯一 ID

customElements.define("svg-icon",class extends HTMLElement{
  connectedCallback(){
    let offset = this.getAttribute("offset") || 5;
    let color = this.getAttribute("color") || "green";
    let id = "gradient"; // + (new Date()/1)
    this
        .attachShadow({mode:"open"}) // leave out for no shadowDOM
        .innerHTML = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
     height="100px" width="100px"         
     fill="url(#${id})">
      <defs>
        <linearGradient id="${id}">
          <stop offset="${offset}%" stop-color="${color}"/>
          <stop offset="${100 - offset}%" stop-color="white"/>
        </linearGradient>
      </defs>
     <path d="M0 0h24v24H0V0z" fill="none"/>
     <path d="M17 4h3v16h-3V4zM5 14h3v6H5v-6zm6-5h3v11h-3V9z"/>
    </svg>`
    }
});

<svg-icon></svg-icon>
<svg-icon offset="20"></svg-icon>
<svg-icon color="red"></svg-icon>

【讨论】：