svg 更改 Edge 上的 linearGradient 颜色问题（EdgeHTML）
svg change linearGradient color issue on Edge (EdgeHTML)
我有一个切换按钮，可以更改一个包含路径节点（三角形）的 svg 和另一个包含线性渐变矩形的 svg 的颜色。通过设置svg内联样式的属性颜色改变颜色，stroke和stop-color值为currentColor。
问题是Microsoft Edge（EdgeHTML，不是最新的chromium 版本）无法更改线性渐变颜色。
其他浏览器，例如 Chrome、FireFox、Safari，甚至 Internet Explorer 11，都能够更改线性渐变颜色，包括过渡动画。
var btn = document.querySelector("button");
var svgTriangles = document.getElementById("triangles");
var svgGradient = document.getElementById("gradient");
var isToggled = false;
btn.addEventListener("click", function() {
svgGradient.style.color = isToggled ? "purple" : "green";
svgTriangles.style.color = isToggled ? "blue" : "red";
isToggled = !isToggled;
});
.container {
position: relative;
margin: 20px 0;
width: 100%;
height: 100px;
overflow: hidden;
}
svg {
position: absolute;
top: 0px;
right: 0;
width: 100%;
}
#gradient {
color: purple;
transition: 1000ms color;
}
#triangles {
color: blue;
transition: 1000ms color;
}
<div class="container">
<svg id="gradient" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="currentColor"></stop>
<stop offset="1" stop-color="currentColor" stop-opacity="0"></stop>
</linearGradient>
<linearGradient xlink:href="#a" id="b" x1="407.0696" y1="2.3634" x2="407.0696" y2="25.1944"
gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 3.07896 0 7.2804)"></linearGradient>
</defs>
<pattern id="pattern-gradient" x="0" y="-20" width="950" height="170" patternUnits="userSpaceOnUse"
viewBox="0 0 908.5405 142.1712">
<path id="super-gradient" d="M -7.667,-4.1408372 H 914.3264 V 142.52666 H -7.667 Z" fill="url(#b)"
fill-rule="evenodd"></path>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-gradient)"></rect>
</svg>
<svg id="triangles" xmlns="http://www.w3.org/2000/svg">
<pattern id="pattern-triangles" x="0" y="-20" width="950" height="170" patternUnits="userSpaceOnUse"
viewBox="0 0 908.5405 142.1712">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path
d="M209.30686 39.901804l-11.09368 23.429179 1.37293 12.472333 27.06-14.610097zM750.15558 23.006326l-25.5677-12.293139-1.80975.747479 15.08987 26.413835zM107.97155 17.601706l8.78453.235948-4.55534-9.943573zM.99995113 18.909927L27.170794 18.401413 8.1608953.999929zM153.52111 115.16404l1.5875-26.127596 16.60261 19.711446zM153.54451 136.97376l.8419-15.80899 20.76685-7.76418 10.66405 12.53494zM147.37059 124.06464l-.93545 15.15418-9.82215.46772v-12.44139zM192.36541 139.12528l.28063-5.79975-2.99341-2.80633-23.85381 8.51253zM192.17832 105.63641l-8.13835 7.10937 8.32544 10.94468zM179.2692 83.466404l-11.88013 10.19633-8.13835-9.63506zM149.52211 84.121214l-1.87089 32.553426-10.7576 4.11595.28064-36.669376zM213.31693 136.19842l-16.13958-31.22083 15.875-1.19063 11.37708 19.57917zM207.847 139.21882l-10.66406.28064.28064-20.20558zM240.30443 139.24112l-12.03854-10.05417-9.26042 10.31875zM228.46433 118.60362l-8.59896-15.61042 22.9526-.99219zM245.33152 136.52914l-13.89063-11.17865 9.06198-10.84791 12.10469 9.65729.19843 4.03489zM252.6737 117.61143l-8.92968-7.54062 9.19427-10.318746zM248.39846 95.346524l-30.77608 1.77734-7.10937-13.18975h42.37559l.28064 5.70621zM210.41947 96.843234l-6.64165-12.90912-6.45456.18709-.0935 13.84456zM192.5525 95.065894v4.20949l-12.30108 10.009236-9.49475-11.131766 14.40583-11.83336zM132.30995 114.89729l-.28063 24.6957-13.37684.37418-10.57051-13.2833 19.64431-17.21216zM128.84881 100.77209l-9.54152-9.635066 8.04481-7.01582 5.23849-.0935-.0936 14.31228zM123. 14.08261zM613.37614 94.774074l-17.47753-10.05901 23.76441-.25147v4.90376zM568.48784 94.396864l-5.28098-3.14344.12573-6.91557 4.90376.12574zM907.54042 118.37986l-.099 14.71653-8.06434-13.8035 3.69679-.45666zM904.65803 137.3991l-9.30459-14.83703-10.81341 11.56785 4.0236 7.0413h12.95097zM874.60675 138.02778l-2.51473-37.72126-5.90968-2.891956.12573 43.505186 5.28098-.12574zM880.64216 130.98648l-2.01181-27.28505 18.7349 10.18474zM901.01164 110.23979l-23.26145-12.322276-.50295-13.57966h10.31049l18.46578 6.434499zM871.33759 94.396864l-5.28098-3.14344.12573-6.91557 4.90376.12574z">
</path>
</g>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-triangles)"></rect>
</svg>
</div>
<button>Toggle to Change Color</button>
我在 Edge Legacy 中测试了您的代码并重现了该问题。设置了颜色样式，但颜色没有改变。
作为解决方法，我改变了编写线性渐变 svg 的方式并切换了 stopColor。你可以参考我下面的示例。它在 Edge Legacy 中运行良好：
var btn = document.querySelector("button");
var svgTriangles = document.getElementById("triangles");
var svgGradient = document.getElementById("gradient");
var isToggled = false;
btn.addEventListener("click", function() {
document.getElementById("firstGradient").style.stopColor = isToggled ? "purple" : "green";
document.getElementById("secondGradient").style.stopColor = isToggled ? "purple" : "green";
svgTriangles.style.color = isToggled ? "blue" : "red";
isToggled = !isToggled;
});
.container {
position: relative;
margin: 20px 0;
width: 100%;
height: 100px;
overflow: hidden;
}
svg {
position: absolute;
top: 0px;
right: 0;
width: 100%;
}
#triangles {
color: blue;
transition: 1000ms color;
}
#firstGradient,
#secondGradient {
stop-color: purple;
transition: 1000ms stop-color;
}
<div class="container">
<svg id="gradient">
<defs>
<linearGradient id="grad1" gradientTransform="rotate(90)">
<stop offset="0" stop-color="currentColor" id="firstGradient"></stop>
<stop offset="1" stop-color="currentColor" id="secondGradient" stop-opacity="0"></stop>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="53%" fill="url(#grad1)" />
</svg>
<svg id="triangles" xmlns="http://www.w3.org/2000/svg">
<pattern id="pattern-triangles" x="0" y="-20" width="950" height="170" patternUnits="userSpaceOnUse"
viewBox="0 0 908.5405 142.1712">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M209.30686 39.901804l-11.09368 23.429179 1.37293 12.472333 27.06-14.610097zM750.15558 23.006326l-25.5677-12.293139-1.80975.747479 15.08987 26.413835zM107.97155 17.601706l8.78453.235948-4.55534-9.943573zM.99995113 18.909927L27.170794 18.401413 8.1608953.999929zM153.52111 115.16404l1.5875-26.127596 16.60261 19.711446zM153.54451 136.97376l.8419-15.80899 20.76685-7.76418 10.66405 12.53494zM147.37059 124.06464l-.93545 15.15418-9.82215.46772v-12.44139zM192.36541 139.12528l.28063-5.79975-2.99341-2.80633-23.85381 8.51253zM192.17832 105.63641l-8.13835 7.10937 8.32544 10.94468zM179.2692 83.466404l-11.88013 10.19633-8.13835-9.63506zM149.52211 84.121214l-1.87089 32.553426-10.7576 4.11595.28064-36.669376zM213.31693 136.19842l-16.13958-31.22083 15.875-1.19063 11.37708 19.57917zM207.847 139.21882l-10.66406.28064.28064-20.20558zM240.30443 139.24112l-12.03854-10.05417-9.26042 10.31875zM228.46433 118.60362l-8.59896-15.61042 22.9526-.99219zM245.33152 136.52914l-13.89063-11.17865 9.06198-10.84791 12.10469 9.65729.19843 4.03489zM252.6737 117.61143l-8.92968-7.54062 9.19427-10.318746zM248.39846 95.346524l-30.77608 1.77734-7.10937-13.18975h42.37559l.28064 5.70621zM210.41947 96.843234l-6.64165-12.90912-6.45456.18709-.0935 13.84456zM192.5525 95.065894v4.20949l-12.30108 10.009236-9.49475-11.131766 14.40583-11.83336zM132.30995 114.89729l-.28063 24.6957-13.37684.37418-10.57051-13.2833 19.64431-17.21216zM128.84881 100.77209l-9.54152-9.635066 8.04481-7.01582 5.23849-.0935-.0936 14.31228zM123. 14.08261zM613.37614 94.774074l-17.47753-10.05901 23.76441-.25147v4.90376zM568.48784 94.396864l-5.28098-3.14344.12573-6.91557 4.90376.12574zM907.54042 118.37986l-.099 14.71653-8.06434-13.8035 3.69679-.45666zM904.65803 137.3991l-9.30459-14.83703-10.81341 11.56785 4.0236 7.0413h12.95097zM874.60675 138.02778l-2.51473-37.72126-5.90968-2.891956.12573 43.505186 5.28098-.12574zM880.64216 130.98648l-2.01181-27.28505 18.7349 10.18474zM901.01164 110.23979l-23.26145-12.322276-.50295-13.57966h10.31049l18.46578 6.434499zM871.33759 94.396864l-5.28098-3.14344.12573-6.91557 4.90376.12574z">
</path>
</g>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-triangles)"></rect>
</svg>
</div>
<button>Toggle to Change Color</button>
感谢 的回答，我能够通过检查 userAgent 和 css 媒体查询在 Yu 的代码中添加额外的逻辑来解决它。
尽管 Yu 的回答通过切换 stop-color 来改变 linearGradient 颜色解决了这个问题，但在 Internet Explorer 中，渐变过渡动画消失了，因为 IE 不支持 SVG 的 CSS 动画元素。
我的原始代码在 IE 中工作的原因是因为动画是在颜色 属性 上完成的，因为停止颜色值是 currentColor，它从 CSS 样式表继承文本颜色。
所以我确保在 IE 中，在 javascript 文件中，我只切换包含 linearGradients 的 svg 元素的文本颜色。在 css 文件中，我在 color 上应用过渡，而不是在仅 IE 的媒体查询上应用 stop-color。
function userAgent(pattern) {
if (typeof window !== "undefined" && window.navigator) {
return !!(/*@__PURE__*/ navigator.userAgent.match(pattern));
}
}
var IE11OrLess = userAgent(
/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i
);
var btn = document.querySelector("button");
var svgTriangles = document.getElementById("triangles");
var svgGradient = document.getElementById("gradient");
var isToggled = false;
btn.addEventListener("click", function() {
if (IE11OrLess) {
svgGradient.style.color = isToggled ? "purple" : "green";
} else {
document.getElementById("firstGradient").style.stopColor = isToggled
? "purple"
: "green";
document.getElementById("secondGradient").style.stopColor = isToggled
? "purple"
: "green";
}
svgTriangles.style.color = isToggled ? "blue" : "red";
isToggled = !isToggled;
});
.container {
position: relative;
margin: 20px 0;
width: 100%;
height: 100px;
overflow: hidden;
}
svg {
position: absolute;
top: 0px;
right: 0;
width: 100%;
}
#triangles {
color: blue;
transition: 1000ms color;
}
#firstGradient,
#secondGradient {
stop-color: purple;
transition: 1000ms stop-color;
}
/* IE10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#firstGradient,
#secondGradient {
stop-color: currentColor;
transition: none;
}
#gradient {
color: purple;
transition: 1000ms color;
}
}
<div class="container">
<svg id="gradient">
<defs>
<linearGradient id="grad1" gradientTransform="rotate(90)">
<!-- Edge Legacy stop-color transitions from black to currentColor upon page load -->
<!-- changed them to desired color, css will override them back to currentColor -->
<stop offset="0" stop-color="purple" id="firstGradient"></stop>
<stop offset="1" stop-color="purple" id="secondGradient" stop-opacity="0"></stop>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="53%" fill="url(#grad1)" />
</svg>
<svg id="triangles" xmlns="http://www.w3.org/2000/svg">
<pattern id="pattern-triangles" x="0" y="-20" width="950" height="170" patternUnits="userSpaceOnUse"
viewBox="0 0 908.5405 142.1712">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path
d="M209.30686 39.901804l-11.09368 23.429179 1.37293 12.472333 27.06-14.610097zM750.15558 23.006326l-25.5677-12.293139-1.80975.747479 15.08987 26.413835zM107.97155 17.601706l8.78453.235948-4.55534-9.943573zM.99995113 18.909927L27.170794 18.401413 8.1608953.999929zM153.52111 115.16404l1.5875-26.127596 16.60261 19.711446zM153.54451 136.97376l.8419-15.80899 20.76685-7.76418 10.66405 12.53494zM147.37059 124.06464l-.93545 15.15418-9.82215.46772v-12.44139zM192.36541 139.12528l.28063-5.79975-2.99341-2.80633-23.85381 8.51253zM192.17832 105.63641l-8.13835 7.10937 8.32544 10.94468zM179.2692 83.466404l-11.88013 10.19633-8.13835-9.63506zM149.52211 84.121214l-1.87089 32.553426-10.7576 4.11595.28064-36.669376zM213.31693 136.19842l-16.13958-31.22083 15.875-1.19063 11.37708 19.57917zM207.847 139.21882l-10.66406.28064.28064-20.20558zM240.30443 139.24112l-12.03854-10.05417-9.26042 10.31875zM228.46433 118.60362l-8.59896-15.61042 22.9526-.99219zM245.33152 136.52914l-13.89063-11.17865 9.06198-10.84791 12.10469 9.65729.19843 4.03489zM252.6737 117.61143l-8.92968-7.54062 9.19427-10.318746zM248.39846 95.346524l-30.77608 1.77734-7.10937-13.18975h42.37559l.28064 5.70621zM210.41947 96.843234l-6.64165-12.90912-6.45456.18709-.0935 13.84456zM192.5525 95.065894v4.20949l-12.30108 10.009236-9.49475-11.131766 14.40583-11.83336zM132.30995 114.89729l-.28063 24.6957-13.37684.37418-10.57051-13.2833 19.64431-17.21216zM128.84881 100.77209l-9.54152-9.635066 8.04481-7.01582 5.23849-.0935-.0936 14.31228zM123. 14.08261zM613.37614 94.774074l-17.47753-10.05901 23.76441-.25147v4.90376zM568.48784 94.396864l-5.28098-3.14344.12573-6.91557 4.90376.12574zM907.54042 118.37986l-.099 14.71653-8.06434-13.8035 3.69679-.45666zM904.65803 137.3991l-9.30459-14.83703-10.81341 11.56785 4.0236 7.0413h12.95097zM874.60675 138.02778l-2.51473-37.72126-5.90968-2.891956.12573 43.505186 5.28098-.12574zM880.64216 130.98648l-2.01181-27.28505 18.7349 10.18474zM901.01164 110.23979l-23.26145-12.322276-.50295-13.57966h10.31049l18.46578 6.434499zM871.33759 94.396864l-5.28098-3.14344.12573-6.91557 4.90376.12574z">
</path>
</g>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-triangles)"></rect>
</svg>
</div>
<button>Toggle to Change Color</button>
我有一个切换按钮，可以更改一个包含路径节点（三角形）的 svg 和另一个包含线性渐变矩形的 svg 的颜色。通过设置svg内联样式的属性颜色改变颜色，stroke和stop-color值为currentColor。
问题是Microsoft Edge（EdgeHTML，不是最新的chromium 版本）无法更改线性渐变颜色。
其他浏览器，例如 Chrome、FireFox、Safari，甚至 Internet Explorer 11，都能够更改线性渐变颜色，包括过渡动画。
var btn = document.querySelector("button");
var svgTriangles = document.getElementById("triangles");
var svgGradient = document.getElementById("gradient");
var isToggled = false;
btn.addEventListener("click", function() {
svgGradient.style.color = isToggled ? "purple" : "green";
svgTriangles.style.color = isToggled ? "blue" : "red";
isToggled = !isToggled;
});
.container {
position: relative;
margin: 20px 0;
width: 100%;
height: 100px;
overflow: hidden;
}
svg {
position: absolute;
top: 0px;
right: 0;
width: 100%;
}
#gradient {
color: purple;
transition: 1000ms color;
}
#triangles {
color: blue;
transition: 1000ms color;
}
<div class="container">
<svg id="gradient" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="a">
<stop offset="0" stop-color="currentColor"></stop>
<stop offset="1" stop-color="currentColor" stop-opacity="0"></stop>
</linearGradient>
<linearGradient xlink:href="#a" id="b" x1="407.0696" y1="2.3634" x2="407.0696" y2="25.1944"
gradientUnits="userSpaceOnUse" gradientTransform="matrix(1 0 0 3.07896 0 7.2804)"></linearGradient>
</defs>
<pattern id="pattern-gradient" x="0" y="-20" width="950" height="170" patternUnits="userSpaceOnUse"
viewBox="0 0 908.5405 142.1712">
<path id="super-gradient" d="M -7.667,-4.1408372 H 914.3264 V 142.52666 H -7.667 Z" fill="url(#b)"
fill-rule="evenodd"></path>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-gradient)"></rect>
</svg>
<svg id="triangles" xmlns="http://www.w3.org/2000/svg">
<pattern id="pattern-triangles" x="0" y="-20" width="950" height="170" patternUnits="userSpaceOnUse"
viewBox="0 0 908.5405 142.1712">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path
d="M209.30686 39.901804l-11.09368 23.429179 1.37293 12.472333 27.06-14.610097zM750.15558 23.006326l-25.5677-12.293139-1.80975.747479 15.08987 26.413835zM107.97155 17.601706l8.78453.235948-4.55534-9.943573zM.99995113 18.909927L27.170794 18.401413 8.1608953.999929zM153.52111 115.16404l1.5875-26.127596 16.60261 19.711446zM153.54451 136.97376l.8419-15.80899 20.76685-7.76418 10.66405 12.53494zM147.37059 124.06464l-.93545 15.15418-9.82215.46772v-12.44139zM192.36541 139.12528l.28063-5.79975-2.99341-2.80633-23.85381 8.51253zM192.17832 105.63641l-8.13835 7.10937 8.32544 10.94468zM179.2692 83.466404l-11.88013 10.19633-8.13835-9.63506zM149.52211 84.121214l-1.87089 32.553426-10.7576 4.11595.28064-36.669376zM213.31693 136.19842l-16.13958-31.22083 15.875-1.19063 11.37708 19.57917zM207.847 139.21882l-10.66406.28064.28064-20.20558zM240.30443 139.24112l-12.03854-10.05417-9.26042 10.31875zM228.46433 118.60362l-8.59896-15.61042 22.9526-.99219zM245.33152 136.52914l-13.89063-11.17865 9.06198-10.84791 12.10469 9.65729.19843 4.03489zM252.6737 117.61143l-8.92968-7.54062 9.19427-10.318746zM248.39846 95.346524l-30.77608 1.77734-7.10937-13.18975h42.37559l.28064 5.70621zM210.41947 96.843234l-6.64165-12.90912-6.45456.18709-.0935 13.84456zM192.5525 95.065894v4.20949l-12.30108 10.009236-9.49475-11.131766 14.40583-11.83336zM132.30995 114.89729l-.28063 24.6957-13.37684.37418-10.57051-13.2833 19.64431-17.21216zM128.84881 100.77209l-9.54152-9.635066 8.04481-7.01582 5.23849-.0935-.0936 14.31228zM123. 14.08261zM613.37614 94.774074l-17.47753-10.05901 23.76441-.25147v4.90376zM568.48784 94.396864l-5.28098-3.14344.12573-6.91557 4.90376.12574zM907.54042 118.37986l-.099 14.71653-8.06434-13.8035 3.69679-.45666zM904.65803 137.3991l-9.30459-14.83703-10.81341 11.56785 4.0236 7.0413h12.95097zM874.60675 138.02778l-2.51473-37.72126-5.90968-2.891956.12573 43.505186 5.28098-.12574zM880.64216 130.98648l-2.01181-27.28505 18.7349 10.18474zM901.01164 110.23979l-23.26145-12.322276-.50295-13.57966h10.31049l18.46578 6.434499zM871.33759 94.396864l-5.28098-3.14344.12573-6.91557 4.90376.12574z">
</path>
</g>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-triangles)"></rect>
</svg>
</div>
<button>Toggle to Change Color</button>
我在 Edge Legacy 中测试了您的代码并重现了该问题。设置了颜色样式，但颜色没有改变。
作为解决方法，我改变了编写线性渐变 svg 的方式并切换了 stopColor。你可以参考我下面的示例。它在 Edge Legacy 中运行良好：
var btn = document.querySelector("button");
var svgTriangles = document.getElementById("triangles");
var svgGradient = document.getElementById("gradient");
var isToggled = false;
btn.addEventListener("click", function() {
document.getElementById("firstGradient").style.stopColor = isToggled ? "purple" : "green";
document.getElementById("secondGradient").style.stopColor = isToggled ? "purple" : "green";
svgTriangles.style.color = isToggled ? "blue" : "red";
isToggled = !isToggled;
});
.container {
position: relative;
margin: 20px 0;
width: 100%;
height: 100px;
overflow: hidden;
}
svg {
position: absolute;
top: 0px;
right: 0;
width: 100%;
}
#triangles {
color: blue;
transition: 1000ms color;
}
#firstGradient,
#secondGradient {
stop-color: purple;
transition: 1000ms stop-color;
}
<div class="container">
<svg id="gradient">
<defs>
<linearGradient id="grad1" gradientTransform="rotate(90)">
<stop offset="0" stop-color="currentColor" id="firstGradient"></stop>
<stop offset="1" stop-color="currentColor" id="secondGradient" stop-opacity="0"></stop>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="53%" fill="url(#grad1)" />
</svg>
<svg id="triangles" xmlns="http://www.w3.org/2000/svg">
<pattern id="pattern-triangles" x="0" y="-20" width="950" height="170" patternUnits="userSpaceOnUse"
viewBox="0 0 908.5405 142.1712">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M209.30686 39.901804l-11.09368 23.429179 1.37293 12.472333 27.06-14.610097zM750.15558 23.006326l-25.5677-12.293139-1.80975.747479 15.08987 26.413835zM107.97155 17.601706l8.78453.235948-4.55534-9.943573zM.99995113 18.909927L27.170794 18.401413 8.1608953.999929zM153.52111 115.16404l1.5875-26.127596 16.60261 19.711446zM153.54451 136.97376l.8419-15.80899 20.76685-7.76418 10.66405 12.53494zM147.37059 124.06464l-.93545 15.15418-9.82215.46772v-12.44139zM192.36541 139.12528l.28063-5.79975-2.99341-2.80633-23.85381 8.51253zM192.17832 105.63641l-8.13835 7.10937 8.32544 10.94468zM179.2692 83.466404l-11.88013 10.19633-8.13835-9.63506zM149.52211 84.121214l-1.87089 32.553426-10.7576 4.11595.28064-36.669376zM213.31693 136.19842l-16.13958-31.22083 15.875-1.19063 11.37708 19.57917zM207.847 139.21882l-10.66406.28064.28064-20.20558zM240.30443 139.24112l-12.03854-10.05417-9.26042 10.31875zM228.46433 118.60362l-8.59896-15.61042 22.9526-.99219zM245.33152 136.52914l-13.89063-11.17865 9.06198-10.84791 12.10469 9.65729.19843 4.03489zM252.6737 117.61143l-8.92968-7.54062 9.19427-10.318746zM248.39846 95.346524l-30.77608 1.77734-7.10937-13.18975h42.37559l.28064 5.70621zM210.41947 96.843234l-6.64165-12.90912-6.45456.18709-.0935 13.84456zM192.5525 95.065894v4.20949l-12.30108 10.009236-9.49475-11.131766 14.40583-11.83336zM132.30995 114.89729l-.28063 24.6957-13.37684.37418-10.57051-13.2833 19.64431-17.21216zM128.84881 100.77209l-9.54152-9.635066 8.04481-7.01582 5.23849-.0935-.0936 14.31228zM123. 14.08261zM613.37614 94.774074l-17.47753-10.05901 23.76441-.25147v4.90376zM568.48784 94.396864l-5.28098-3.14344.12573-6.91557 4.90376.12574zM907.54042 118.37986l-.099 14.71653-8.06434-13.8035 3.69679-.45666zM904.65803 137.3991l-9.30459-14.83703-10.81341 11.56785 4.0236 7.0413h12.95097zM874.60675 138.02778l-2.51473-37.72126-5.90968-2.891956.12573 43.505186 5.28098-.12574zM880.64216 130.98648l-2.01181-27.28505 18.7349 10.18474zM901.01164 110.23979l-23.26145-12.322276-.50295-13.57966h10.31049l18.46578 6.434499zM871.33759 94.396864l-5.28098-3.14344.12573-6.91557 4.90376.12574z">
</path>
</g>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-triangles)"></rect>
</svg>
</div>
<button>Toggle to Change Color</button>
感谢
尽管 Yu 的回答通过切换 stop-color 来改变 linearGradient 颜色解决了这个问题，但在 Internet Explorer 中，渐变过渡动画消失了，因为 IE 不支持 SVG 的 CSS 动画元素。
我的原始代码在 IE 中工作的原因是因为动画是在颜色 属性 上完成的，因为停止颜色值是 currentColor，它从 CSS 样式表继承文本颜色。
所以我确保在 IE 中，在 javascript 文件中，我只切换包含 linearGradients 的 svg 元素的文本颜色。在 css 文件中，我在 color 上应用过渡，而不是在仅 IE 的媒体查询上应用 stop-color。
function userAgent(pattern) {
if (typeof window !== "undefined" && window.navigator) {
return !!(/*@__PURE__*/ navigator.userAgent.match(pattern));
}
}
var IE11OrLess = userAgent(
/(?:Trident.*rv[ :]?11\.|msie|iemobile|Windows Phone)/i
);
var btn = document.querySelector("button");
var svgTriangles = document.getElementById("triangles");
var svgGradient = document.getElementById("gradient");
var isToggled = false;
btn.addEventListener("click", function() {
if (IE11OrLess) {
svgGradient.style.color = isToggled ? "purple" : "green";
} else {
document.getElementById("firstGradient").style.stopColor = isToggled
? "purple"
: "green";
document.getElementById("secondGradient").style.stopColor = isToggled
? "purple"
: "green";
}
svgTriangles.style.color = isToggled ? "blue" : "red";
isToggled = !isToggled;
});
.container {
position: relative;
margin: 20px 0;
width: 100%;
height: 100px;
overflow: hidden;
}
svg {
position: absolute;
top: 0px;
right: 0;
width: 100%;
}
#triangles {
color: blue;
transition: 1000ms color;
}
#firstGradient,
#secondGradient {
stop-color: purple;
transition: 1000ms stop-color;
}
/* IE10+ */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
#firstGradient,
#secondGradient {
stop-color: currentColor;
transition: none;
}
#gradient {
color: purple;
transition: 1000ms color;
}
}
<div class="container">
<svg id="gradient">
<defs>
<linearGradient id="grad1" gradientTransform="rotate(90)">
<!-- Edge Legacy stop-color transitions from black to currentColor upon page load -->
<!-- changed them to desired color, css will override them back to currentColor -->
<stop offset="0" stop-color="purple" id="firstGradient"></stop>
<stop offset="1" stop-color="purple" id="secondGradient" stop-opacity="0"></stop>
</linearGradient>
</defs>
<rect x="0" y="0" width="100%" height="53%" fill="url(#grad1)" />
</svg>
<svg id="triangles" xmlns="http://www.w3.org/2000/svg">
<pattern id="pattern-triangles" x="0" y="-20" width="950" height="170" patternUnits="userSpaceOnUse"
viewBox="0 0 908.5405 142.1712">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path
d="M209.30686 39.901804l-11.09368 23.429179 1.37293 12.472333 27.06-14.610097zM750.15558 23.006326l-25.5677-12.293139-1.80975.747479 15.08987 26.413835zM107.97155 17.601706l8.78453.235948-4.55534-9.943573zM.99995113 18.909927L27.170794 18.401413 8.1608953.999929zM153.52111 115.16404l1.5875-26.127596 16.60261 19.711446zM153.54451 136.97376l.8419-15.80899 20.76685-7.76418 10.66405 12.53494zM147.37059 124.06464l-.93545 15.15418-9.82215.46772v-12.44139zM192.36541 139.12528l.28063-5.79975-2.99341-2.80633-23.85381 8.51253zM192.17832 105.63641l-8.13835 7.10937 8.32544 10.94468zM179.2692 83.466404l-11.88013 10.19633-8.13835-9.63506zM149.52211 84.121214l-1.87089 32.553426-10.7576 4.11595.28064-36.669376zM213.31693 136.19842l-16.13958-31.22083 15.875-1.19063 11.37708 19.57917zM207.847 139.21882l-10.66406.28064.28064-20.20558zM240.30443 139.24112l-12.03854-10.05417-9.26042 10.31875zM228.46433 118.60362l-8.59896-15.61042 22.9526-.99219zM245.33152 136.52914l-13.89063-11.17865 9.06198-10.84791 12.10469 9.65729.19843 4.03489zM252.6737 117.61143l-8.92968-7.54062 9.19427-10.318746zM248.39846 95.346524l-30.77608 1.77734-7.10937-13.18975h42.37559l.28064 5.70621zM210.41947 96.843234l-6.64165-12.90912-6.45456.18709-.0935 13.84456zM192.5525 95.065894v4.20949l-12.30108 10.009236-9.49475-11.131766 14.40583-11.83336zM132.30995 114.89729l-.28063 24.6957-13.37684.37418-10.57051-13.2833 19.64431-17.21216zM128.84881 100.77209l-9.54152-9.635066 8.04481-7.01582 5.23849-.0935-.0936 14.31228zM123. 14.08261zM613.37614 94.774074l-17.47753-10.05901 23.76441-.25147v4.90376zM568.48784 94.396864l-5.28098-3.14344.12573-6.91557 4.90376.12574zM907.54042 118.37986l-.099 14.71653-8.06434-13.8035 3.69679-.45666zM904.65803 137.3991l-9.30459-14.83703-10.81341 11.56785 4.0236 7.0413h12.95097zM874.60675 138.02778l-2.51473-37.72126-5.90968-2.891956.12573 43.505186 5.28098-.12574zM880.64216 130.98648l-2.01181-27.28505 18.7349 10.18474zM901.01164 110.23979l-23.26145-12.322276-.50295-13.57966h10.31049l18.46578 6.434499zM871.33759 94.396864l-5.28098-3.14344.12573-6.91557 4.90376.12574z">
</path>
</g>
</pattern>
<rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-triangles)"></rect>
</svg>
</div>
<button>Toggle to Change Color</button>