I'm creating a svg icon to fill with a color percentage from linearGradient.

In linearGradient I'm creating id's dynamically and want to make use of the same dynamically created id's in 

I tried interpolation fill={url(`#linear${i}`)} which didn't work and not sure if this is the right way to use in SVG.

Is there a better way to achieve this?

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

```