Reputation: 3230

svg change linearGradient color issue on Edge (EdgeHTML)

I have a toggle button that changes colors of one svg that holds path nodes(triangles) and the second one that holds a linear gradient rectangle. The color is changed by setting the property color of the svg inline style, the stroke and stop-color values are currentColor.

The issue is that Microsoft Edge(EdgeHTML, not the recent chromium version) is not able to change the linear gradient color.

Other browsers such as Chrome, FireFox, Safari, and even Internet Explorer 11, are able to change linear gradient color including the transition animation.

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>

Upvotes: 0

Answers (2)

Caleb Taylor

Reputation: 3230

Thanks to Yu Zhou's answer, I was able to solve it by adding additional logic in Yu's code by checking userAgent and css media queries.

Even though Yu's answer solved the issue by changing the linearGradient color through toggling the stop-color, in Internet Explorer, the gradient transition animation is gone because IE doesn't support CSS animation of SVG elements.

The reason my original code worked in IE was because the animation was done on the color property since stop-color value was currentColor which inherits text color from CSS stylesheet.

So I made sure that in IE, in the javascript file, I'm only toggling the text color of the svg element that holds the linearGradients. In the css file, I'm applying transition on the color instead of stop-color on a IE only media query.

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>

Upvotes: 0

Yu Zhou

Reputation: 12946

I tested your code in Edge Legacy and reproduced the issue. The color style is set but the color doesn't change.

As a workaround, I change the way to write the linear gradient svg and toogle the stopColor. You could refer to my sample below. It works well in 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>

Upvotes: 1

svg change linearGradient color issue on Edge (EdgeHTML)

Answers (2)

Related Questions