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>
Post a Comment for "Transitioning SVG Gradient Color-stops On Hover"