Transitioning Svg Gradient Color-stops On Hover

So I've got this CodePen: https://codepen.io/naregjan/pen/MBzQWp In it, I've got four rects inside of an SVG frame, and two of them have gradients. I want to transition the stop co

Solution 1:

As @Kaiido said, you are being thwarted because style attributes override CSS. So your hover rules were having no effect.

The fix is to change them to attributes. Change

style="stop-color:#ffffff"

to

stop-color="#ffffff"

In addition, you had a typo. </rect should be </rect> in the second rectangle.

.red{
  fill: url(#grad1);
}
.red ~ defs stop{
  transition: 1s;
}
.red:hover ~ defs stop:first-child {
  stop-color: #ffbbcc;
}
.red:hover ~ defs stop:last-child {
  stop-color: #0000ff;
}

<svgid="sqSVG"width="500"height="500"><rectclass="square green"x="135"y="135"width="100"height="100"></rect><rectclass="square green"x="10"y="135"width="100"height="100"></rect><rectclass="square red"x="135"y="10"width="100"height="100"></rect><rectclass="square red"x="10"y="10"width="100"height="100"></rect><defs><linearGradientid="grad1"x1="0%"y1="0%"x2="110%"y2="110%"><stopoffset="0%"stop-color="#ff0000"></stop><stopoffset="100%"stop-color="#ffffff"></stop></linearGradient></defs></svg>