javascript - svg 更改 Edge 上的 LinearGradient 颜色问题 (EdgeHTML)

Question

我有一个切换按钮，可以更改保存路径节点(三 Angular 形)的一个 svg 和保存线性渐变矩形的第二个 svg 的颜色。通过设置svg内联样式的属性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>

Answer 1

我在 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>