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;
}

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