svg change линейная градиентная проблема цвета на краю (Edge HTML)

Question

У меня есть кнопка переключения, которая меняет цвета одного SVG, который содержит узлы пути (треугольники), и второго, который содержит прямоугольник с линейным градиентом. Цвет изменяется, устанавливая цвет свойства встроенного стиля SVG, значения обводки и стоп-цвета равны currentColor.

Проблема заключается в том, что Microsoft Edge (Edge HTML, а не последняя версия хрома) не может изменить цвет линейного градиента.

Другие браузеры, такие как Chrome, FireFox, Safari и даже Inte rnet 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>

Answer 2

Благодаря ответу Ю Чжоу я смог решить эту проблему, добавив дополнительные логи c в код Юя, проверив userAgent и css медиазапросы.

Хотя ответ Юй решил проблему, изменив цвет linearGradient путем переключения stop-color, в Inte rnet Explorer анимация перехода с градиентом пропала, потому что IE не поддерживает CSS анимацию элементов SVG.

Причина, по которой мой исходный код работал в IE, заключалась в том, что анимация была выполнена для свойства color, поскольку значение stop-color было currentColor, которое наследует цвет текста из CSS таблицы стилей.

Поэтому я убедился, что в IE, в файле javascript, я только переключаю цвет текста элемента svg, который содержит linearGradients. В файле css я применяю переход к color вместо stop-color только для мультимедийного запроса IE.

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>