我正在創建一個 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>
uj5u.com熱心網友回復：
有不同的方法可以使它作業：
在屬性系結上使用插值
attr.fill="url(#linear{{i}})"在屬性系結上使用字串連接
[attr.fill]="'url(#linear' i ')'"
uj5u.com熱心網友回復：
將其包裝在原生 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/418303.html
標籤：