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

Question

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

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

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

我试过插值 fill={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>

Answer 1

有多种方法可以使其发挥作用：

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

Answer 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>

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

Is there a possibility to use a dynamic id in SVG fill=url(#)

html

css

angular

svg

linear-gradients