我正在嘗試在帶有 js 的 svg 內的線性漸變標簽中添加一些步驟。
我的代碼有效，這意味著腳本運行后標記是正確的，但 svg 沒有更新/重新渲染。
我從這樣的事情開始
<svg
id="animatedPath"
width="552"
height="61"
viewBox="0 0 552 61"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="pathToAnimate"
d="M-22.125 45.875C42.5625 54.3125 56.625 31.8119 98.8125 20.5625C129.589 12.3558 166.31 9.3125 183.188 17.7506C205.688 29 218.018 54.3125 239.438 54.3125C261.938 54.3125 284.438 34.625 312.562 20.5625C340.688 6.5 345.75 9.3125 377.25 9.3125C416.625 9.3125 470.062 45.875 489.75 54.3125C509.438 62.75 524.639 55.9499 529.125 40.25C534.75 20.5625 534.75 6.5 616.312 3.6875"
stroke-width="5.625"
stroke-linecap="round"
/>
<defs>
<linearGradient
id="logoGradient"
x1="3.18749"
y1="14.9375"
x2="548.812"
y2="20.5625"
gradientUnits="userSpaceOnUse"
></linearGradient>
</defs>
</svg>
在我的 js 代碼中，我在顏色陣列上做了一個簡單的回圈
let linearGradient = document.querySelector(
"#animatedPath defs linearGradient"
);
let gradient=["#FFE600", "#05FF00", "#00D1FF", "#FF0000"];
gradient.forEach((color, index) => {
let stop = document.createElement("stop");
stop.setAttribute("offset", index / 4);
stop.setAttribute("stop-color", color);
linearGradient.appendChild(stop);
});
代碼有效，我可以看到線性漸變內的步驟，但 svg 未更新。如果我將步驟手動放在 svg 中，它顯然可以作業，如果稍后在代碼中我嘗試使用 js 操作步驟，則 svg 會更新。
我已經閱讀了一些關于suspendRedraw的東西，但也已被棄用，可能不適用于這種情況。
有人有什么建議嗎？
let linearGradient = document.querySelector(
"#animatedPath defs linearGradient"
);
let gradient = ["#FFE600", "#05FF00", "#00D1FF", "#FF0000"]
gradient.forEach((color, index) => {
let stop = document.createElement("stop");
stop.setAttribute("offset", index / 4);
stop.setAttribute("stop-color", color);
linearGradient.appendChild(stop);
}); <svg
id="animatedPath"
width="552"
height="61"
viewBox="0 0 552 61"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="pathToAnimate"
d="M-22.125 45.875C42.5625 54.3125 56.625 31.8119 98.8125 20.5625C129.589 12.3558 166.31 9.3125 183.188 17.7506C205.688 29 218.018 54.3125 239.438 54.3125C261.938 54.3125 284.438 34.625 312.562 20.5625C340.688 6.5 345.75 9.3125 377.25 9.3125C416.625 9.3125 470.062 45.875 489.75 54.3125C509.438 62.75 524.639 55.9499 529.125 40.25C534.75 20.5625 534.75 6.5 616.312 3.6875"
stroke-width="5.625"
stroke-linecap="round"
/>
<defs>
<linearGradient
id="logoGradient"
x1="3.18749"
y1="14.9375"
x2="548.812"
y2="20.5625"
gradientUnits="userSpaceOnUse"
></linearGradient>
</defs>
</svg>uj5u.com熱心網友回復：
對于 SVG 元素，您需要使用Document.createElementNS()而不是createElement(). 為第一個引數傳入的正確命名空間是'http://www.w3.org/2000/svg'.
let linearGradient = document.querySelector(
"#animatedPath defs linearGradient"
);
let gradient = ["#FFE600", "#05FF00", "#00D1FF", "#FF0000"]
gradient.forEach((color, index) => {
let stop = document.createElementNS("http://www.w3.org/2000/svg", "stop");
stop.setAttribute("offset", index / 4);
stop.setAttribute("stop-color", color);
linearGradient.appendChild(stop);
});<svg
id="animatedPath"
width="552"
height="61"
viewBox="0 0 552 61"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="pathToAnimate"
d="M-22.125 45.875C42.5625 54.3125 56.625 31.8119 98.8125 20.5625C129.589 12.3558 166.31 9.3125 183.188 17.7506C205.688 29 218.018 54.3125 239.438 54.3125C261.938 54.3125 284.438 34.625 312.562 20.5625C340.688 6.5 345.75 9.3125 377.25 9.3125C416.625 9.3125 470.062 45.875 489.75 54.3125C509.438 62.75 524.639 55.9499 529.125 40.25C534.75 20.5625 534.75 6.5 616.312 3.6875"
stroke-width="5.625"
stroke-linecap="round"
/>
<defs>
<linearGradient
id="logoGradient"
x1="3.18749"
y1="14.9375"
x2="548.812"
y2="20.5625"
gradientUnits="userSpaceOnUse"
></linearGradient>
</defs>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/491807.html
標籤：javascript html svg
下一篇：當表格中沒有選擇時禁用繼續按鈕