Is there a way to bring a collection of items to life through animation in SVG?

I have encountered an issue where the animation stops working when I group two rectangles together, but it works perfectly fine with each rectangle separately. Can anyone help me troubleshoot and fix this problem?

<svg width="800" height="600" style="background-color:black">

<g id="rects">
<rect x="50" y="400" width="50"
height="20" fill="gold" />
<rect x="50" y="470" width="50"
height="20" fill="gold" />
</g>

<animate xlink:href="#rects"
attributeName="fill" dur="4s"
repeatCount="indefinite"
values="gold; gold; ivory; gold"
keyTimes="0; 0.7; 0.8; 1" />

</svg>
htmlcsssvg

Answer №1

The CSS specificity of the fill attribute on the rect elements takes precedence over that of the g element. Removing the fill attribute from the rect elements should resolve this issue.

<svg width="800" height="600" style="background-color:black">

<g id="rects">
<rect x="50" y="400" width="50"
height="20" />
<rect x="50" y="470" width="50"
height="20" />
</g>

<animate xlink:href="#rects"
attributeName="fill" dur="4s"
repeatCount="indefinite"
values="gold; gold; ivory; gold"
keyTimes="0; 0.7; 0.8; 1" />

</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

Bootstrap collapsible feature: display one while concealing the other

I am experiencing an issue with my collapse feature. My goal is to have one collapse section open at a time - when I click to expand one section, the others should hide, and vice versa. I referred to this article (Bootstrap: Collapse other sections when o ...

phphtmltwitter-bootstrapbootstrap-4

Having trouble with your jQuery slideDown menu?

I am facing the exact same issue I had last week. Here is an example of my HTML code: <article class="tickets"> <div class="grid_12 left"> <div class="header"> <i class="ico ...

jqueryhtmlcss

The scroll animation feature in Bootstrap 4 is not functioning properly

I am encountering an issue while trying to implement a smooth scrolling animation using bootstrap 4.3.1 and jquery 3.3.1 scrollspy. The scroll-spy feature seems to be functioning properly, but the animation is not working for some unknown reason. This co ...

jqueryhtmlanimationscrollbootstrap-4

Is there a way to modify the color of a checkbox within MUI?

I'm currently customizing the checkbox color in Material UI while using FormIk for data submission. I aim to change the default checkbox color to red, but I'm unsure about how to achieve this. <FormGroup> <Box display=" ...

cssreactjsformsmaterial-uiformik-material-ui

Leveraging HTACCESS to transform names of .html files into id variables within $_GET[]

My goal is to: If there is a URL that ends with: _2.html or any other number such as: _3.html, _4.html convert it to ?page_number_0=2 For example: http://example.com/top-10-answers/top-10-answer_2.html http://example.com/top-10-answers/top-10-answe ...

html.htaccessget

Uncovering Secret Information with Beautiful Soup 4

I've hit a roadblock with my current project. I'm attempting to extract player names and projections from this website: The plan involves running a script that loops through various PID values, but that part is not causing any issues. The real c ...

pythonhtmlpandasseleniumbeautifulsoup

Maintain the proportion of the browser window when reducing its size

<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <img src="spacer--1200x800.png" width="1200" height="800" /> </body> </html> This section contains CSS ...

javascripthtmlcss

Can you point me to the location of the HTML emoji storage?

Initially, I decided to switch my icons from .png files to standard HTML emojis in an attempt to reduce the weight of the pages. These web pages are hosted on a small microcontroller - ESP32. While the majority of devices display the emojis correctly, the ...

htmlfontscross-browseremoji

Deactivate the array element if it is found in any of the other arrays

I have an array called Array1, with elements ["A","B","C","D","E"]. If any element in Array1 is already present in arrays Array2, Array3, or Array4, then that particular element should be disabled. This means that I will not be able to select that option ...

javascripthtml

Is it possible to create a touch menu on an iPhone by utilizing basic markup and implementing the :hover-state feature?

After finally launching my WordPress blog, I spent a significant amount of time developing the theme. When I attempted to view the site on my iPhone for the first time, I was surprised by what I saw. Initially, I thought creating a touch menu would be as s ...

htmlcsshovertouchmobile-safari

What is the best way to populate an HTML div with content from an external HTML page using jQuery/AJAX?

I am looking to implement a feature where, upon clicking a link, the contents of an html file (home.html) will be loaded into a div container within another main html file (index.html). I specifically want to achieve this using jQuery/ajax as I have only f ...

javascriptjqueryhtmlajax

Invoking a nested function within an array

I need to trigger a function with a button click. The function I want to call is nested within another function, which is part of an array. demo = { volej: function(param) { (new initChartist).users(param); }, initPickColor: function(){ ...

javascripthtml

What is the best way to ensure that the content on my webpage stays below the navbar, no matter the height of the

I've been working on my homepage layout and encountered an issue with positioning the content below the navbar, which is centered on the page. Every time I adjust the window height, the content shifts. How can I ensure that it stays fixed below the na ...

htmlcssresponsive-designscreen-orientation

The Navigation Bar is positioned too distant towards the Right side

Update: The issue has been resolved. Thank you for the assistance. I'm facing a problem with my navigation bar on my website. I can't seem to get it to span the entire width of the page while staying centered. The navigation bar is sticky and fu ...

javascriptjqueryhtmlcss

Learn how to use CSS flexbox to easily vertically center items within a container with a full-height background

I'm having trouble with aligning text vertically centered within a box and making sure the background color stretches to full height. HTML: <div class="feature-content"> <div class="feature-visual"> <div class="embed-container"> ...

cssflexbox

Crafting a website complete with fixed tabs for seamless navigation

I am in the process of developing a website with multiple tabs on a single page. My goal is to ensure that these tabs remain visible even after refreshing the page, and also be able to direct users to a specific tab when they visit the page. Currently, I a ...

javascriptphpjqueryhtmltabs

Why must we always begin rotating with 0 in CSS Animation's webkit transform rotate?

Can anyone assist me with this issue? I have created a jsfiddle with an example. In summary, I am trying to rotate an "orange dart" in a circle every time the user clicks on a link. The rotation works fine, but the problem is that the "orange dart" always ...

javascriptjquerycssrotationcss-animations

How to prevent ng-click from activating in AngularJS when an element has a certain class

I have a series of li elements with functions associated to them. Additionally, I've implemented an event listener that adds a "current" class to the clicked li element. HTML <ul class="cf" id="filter"> <li ng-click="getRadius(5)" class="c ...

javascriptjqueryhtmlangularjs

Tips for assigning a random numerical value to each cell

I am struggling to assign each cell a random double-digit number between 50 and 500. I have been attempting to use the Math.floor(Math.random()) function but have not had any success so far. Additionally, I am trying to figure out how to target only one c ...

javascripthtmlcss

Tips for adjusting the height of a div element to completely occupy the unused portion of the viewport

How can I adjust the height of the sliding-in menu to fill the viewport below the mobile-navbar div without extending beyond it and causing scroll bars? The desired height should be: [100vh-(height of mobile-navbar)] I want to avoid setting a fixed value t ...

htmlcss