changing the gradient color stops of an SVG on hover

Here's a CodePen I've been working on: https://codepen.io/naregjan/pen/MBzQWp

Within this CodePen, I have an SVG container with four rectangles, two of which have gradients applied. My goal is to create a hover effect that transitions the gradient colors similar to what you see in this example.

Below is the relevant CSS code:

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

And here is the corresponding HTML (the rectangles are dynamically generated via JavaScript):

<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%" style="stop-color:#ff0000"></stop>
      <stop offset="100%" style="stop-color:#ffffff"></stop>
    </linearGradient>
  </defs>
</svg>

I'm struggling to understand why the transition effect isn't working as expected. The stop color doesn't change on hover at all, and I've double-checked my code against the example pen I referenced. It seems like everything should be set up correctly with the parent-child relationship between the rects and defs elements... What am I missing?

Additionally, here's the function I'm using to create the squares:

function makeSquares(){
  var svg = document.querySelector("#sqSVG");

  var squares = [
    {x : "10", y : "10", color: "red"},
    {x : "135", y : "10", color: "red"},
    {x : "10", y : "135", color: "green"},
    {x : "135", y : "135", color: "green"}
  ];

  squares.forEach(sq => {
    var newSq = document.createElementNS("http://www.w3.org/2000/svg", 'rect');
    newSq.setAttribute("class", "square " + sq.color);
    newSq.setAttribute("x", sq.x);
    newSq.setAttribute("y", sq.y);
    newSq.setAttribute("width", "100");
    newSq.setAttribute("height", "100");
    svg.prepend(newSq);
  });
}

However, even when I hard-code these square elements into the HTML, the hover effect still doesn't work. Any insights or assistance would be greatly appreciated.

Answer №1

According to @Kaiido, your issue is due to the fact that style attributes take precedence over CSS. This means that your hover rules were not being applied as expected.

The solution is to switch them to attributes. Replace

style="stop-color:#ffffff"

with

stop-color="#ffffff"

Additionally, there was a typo where </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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a default option of "please select" on an Angular select element with a null value for validation

Within my Angular application, I am using a select element with an ngFor loop: <select formControlName="type" required> <option *ngFor="let type of typeList" [ngValue]="type.value">{{ type.caption }}</option> </select> When view ...

When multiple checkboxes are selected, corresponding form fields should dynamically appear based on the checkboxes selected. I attempted to achieve this functionality using the select option method

Require checkboxes instead of a selection option and have multiple checkbox options. Depending on the checked checkboxes, different form fields should appear. A submit button is needed. I have included some CSS code, but a more detailed CSS code is requir ...

Wordpress dynamic content enhanced with Bootstrap carousel

My current issue involves a Bootstrap carousel that I've implemented in WordPress. While the carousel itself is functioning properly, I'm having trouble getting it to link to specific articles when the images are clicked on. Can anyone offer advi ...

Need assistance posting on Twitter? Utilize PHP for a solution!

I'm attempting to share a user-generated and dynamic URL on Twitter, but I'm having trouble with the encoding... <a href="http://twitter.com/?status=[urlencode('I'd like to borrow this item @neighborrow')].">TWEET THIS REQUE ...

Enhancing Form Spacing with Bootstrap

I have been working on a form design, but I am now facing alignment issues. The problem is more noticeable on larger screens compared to smaller ones. The main issues I am encountering include extra spacing in the social links section even though there ar ...

Stop the color buffer from being automatically cleared in WebGL

Removing gl.clearColor(c[0],c[1],c[2],1.0); gl.clear(gl.COLOR_BUFFER_BIT ); does not stop the screen from getting cleared at the start of the next draw cycle. Is there a method to avoid this situation? I am aiming for an overpaint effect. ...

Updating HTML Pages with Dynamic Content

Dealing with a massive project consisting of 50,000 pages (20,000 aspx forms, 10,000 asp forms, and 10,000 html pages) can be overwhelming. With only 2 days to complete the task of adding content after the body tag on all pages, I am seeking advice on ho ...

Tips for selecting a dropdown item that shares the same data-testid

I am attempting to use Selenium to click on an option in a dropdown menu. The options all have the same 'data-testid', and the only unique identifier appears to be the link text. Does anyone know of a way to select a specific choice within the dr ...

Adjusting the height of an Angular CDK virtual scroll viewport based on dynamic needs

Currently, I am developing an Angular table with the cdk Virtual Scroll feature. Is there a method to adjust the scroll viewport's height dynamically? While the standard style property works, I am encountering difficulties setting the value using ngSt ...

Hide the border below the active tab

Could anyone assist me in removing the border below the selected tab? I've attempted multiple approaches without success. I experimented with adding a negative margin to the tab and creating a white border, but as the border I want to conceal is from ...

Is there a way to dynamically update the text in an HTML element with a randomly generated value using JavaScript?

Currently, I am working on a coding project where I am attempting to create a flip box that reveals the name of a superhero from an array when clicked by a user. The code pen link provided showcases my progress so far: https://codepen.io/zakero/pen/YmGmwK. ...

Centering divs using iPad media queries does not seem to work properly

While working on my website, I encountered an issue with displaying content properly on various mobile devices. I have implemented media queries for this purpose. Currently, on the main site, two divs (#wrap and #scrollbar) are positioned next to each oth ...

Creating a diagonal rectangle with a flat bottom: A step-by-step guide

Hey there, I've encountered a little issue. I managed to create a diagonal shape on my webpage similar to the one shown in this image: https://i.sstatic.net/tMgpd.png Now, what I'm aiming for is something like this: https://i.sstatic.net/xToz7.p ...

Utilizing the power of JSF ajax with Bootstrap's data-toggle feature for radio buttons

Despite my efforts, I have not been able to find a definitive answer on SO. If this question has already been addressed, please point me in the right direction. This is what I currently have: (HTML) <span class="btn-group" data-toggle="buttons-radio" ...

Text will not be displayed when it is written on images

I'm currently facing a challenge with adding text onto two different images, one on the left and one on the right. I have included HTML and CSS code but it seems to be incorrect. Can someone please help me fix it? #container { width: 400px; hei ...

Is it possible to export CSS stylesheets for shadow DOM using @vanilla-extract/css?

I have been exploring the use of @vanilla-extract/css for styling in my React app. The style method in this library exports a className from the *.css.ts file, but I need inline styling to achieve Shadow DOM encapsulation. During my research, I came acros ...

The Bootstrap modal is not properly clearing all attribute properties when it is hidden

Alrighty, so I've got this modal set up: <div id="modal-container" class="modal fade" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content center-block" style="displ ...

Transition delays in Tailwind CSS when dark mode is activated

My dark mode toggle is functioning with the following CSS: :root { --primary: var(--white); } .dark { --primary: var(--black); } However, when I include the following code: * { @apply transition-colors duration-700; } The background colors of ...

Discovering the special HTML element lacking attributes

When two similar tags, such as anchor tags below, do not have any attributes or css properties associated between them, is there an internal property to distinguish between the two? <html> <body> <a>sample</a> <a>s ...

How can I generate a checkbox in a database with a field that allows for enabling and disabling?

I am looking to design a table that includes questions, checkboxes, and text boxes. All the questions are stored in a database and called through an array. In addition, I want to create disabled textboxes that become enabled when their corresponding checkb ...