Issue with animated SVG failing to display in web browser

I created an animated .svg file that you can view here, but I encountered an error when trying to open it in the browser:

https://i.sstatic.net/YMf5L.png

The color appears different, even though the code remains the same. 

<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.32 84.01">
  <defs><style>.cls-1{fill:#000000;}.cls-2,.cls-3{fill:none;stroke-miterlimit:10;}.cls-2{stroke:#000000;}.cls-3{stroke:#000000;}   </style>
  </defs>
  <title>endless 60</title>
  <path class="cls-1" d="M14.45 1.65H1.18v6.11h8.65v1.19H-.01V.42h14.46v1.19zm0 21.92H0v-8.48h9.84v1.19H1.19v6.14h13.26v1.19zM17.59 52.68l-.76.92L1.19 40.76V53.6H0V38.22zM1.08 31.42l.76-.92 15.61 12.84V30.5h1.19v15.38zM6.13 60.91c15 0 15 23.1 0 23.1H.19v-23.1h5.94zm0 21.92c13.3 0 13.3-20.73 0-20.73H1.38v20.72h4.75zM25.62.42h1.19v22h13.27v1.19H25.62V.42...

Why do you think the animate and '80' are not showing up? Any suggestions?

Thank you

htmlcsssvg

Answer №1

There appears to be an additional attribute key included in your <animate> path that is unnecessary. The correct format should be as follows:

<animate
         attributeName="opacity"
         dur="2000ms" to="#f06d06"
         repeatCount="indefinite">
</animate>

For more information on the proper usage of the <animate> element, please refer to the documentation available at: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animate

Answer №2

SVG requires attributes to have a specific value, such as selected="selected". In this scenario, the animate attribute is unnecessary.

Here's how you can correct it:

<animate
  attributeName="opacity"
  dur="2000ms" to="#f06d06"
  repeatCount="indefinite">
</animate>

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

Issue with flash installation

I'm currently working on a WordPress website at www.studium.cl. However, I've encountered an issue when trying to open it in Internet Explorer. Each time I try to access the site, a window pops up prompting me to install Adobe Flash Player. Even ...

phphtmlflashwordpress

Is it acceptable to include a heading element within a label element?

Would it be acceptable to include other elements such as <h1> <h2> <b> within <label> elements, or is it preferable to use style instead? <label for="B"><b>like this</b></label> <label for=" ...

html

The functionality of AJAX is triggered only on the second click

On my index.html page, I'm attempting to implement a basic AJAX functionality. When clicking on an anchor tag, the text will be sent to a PHP page called data.php, which will then display the clicked page. The code is functional, but there seems to be ...

phpjqueryhtmlajax

The integration of CSS into an HTML file is ineffective

I'm new to learning about html and css files, and I've been struggling with a particular issue for some time. I created these files, but I can't seem to apply the css to the html file: app.py from flask import Flask from flask import rende ...

pythonhtmlcss

Issue: In Firefox, resizing elements using position:absolute does not work as expected

My resizable div code looks like this: #box { height: 10rem; width: 10rem; resize: both; overflow: hidden; border: solid black 0.5rem; position: absolute; pointer-events: none; } <div id="item"></div> While it works perfectly ...

javascripthtmlcss

Is there a way to create a timed fadeIn and fadeOut effect for a div using HTML and CSS?

I have a single div that initially displays text, and I want it to fade out after a specific time so that another div will then fade in. However, my attempt at coding this transition is not producing the desired result: $(function() { $(".preloa ...

javascripthtmljquerycss

The display: table attribute is proving to be ineffective in creating the desired table layout. I am seeking alternative ways to

Is there a way to create a table using the CSS property display: table without utilizing the table element? I've searched for examples, but haven't found anything that has been helpful. Can someone please provide a fiddle of a table with a minimu ...

htmlcsshtml-tabledisplay

Switch the orientation of a live table moving horizontally to vertically and vice versa

config.previewData = [ { Products:27989, Total Customers:294, Metrics:"MVC", Toner Products:5928, INK Products:22061 }, { Products:56511, Total Customers:376, Metrics:"SMB", ...

javascripthtmlangularjs

Connect an EventListener in JavaScript to update the currentTime of an HTML5 media element

*update I have made some changes to my code and it is now working. Here's the link: I am trying to pass a JavaScript variable to an HTML link... You can find my original question here: HTML5 video get currentTime not working with media events javscr ...

javascripthtmlvideoevent-listener

Ways to update div content following a successful AJAX call

I have a form that utilizes AJAX requests, and when the input fields are not filled correctly and the submit button is clicked, error messages are displayed without refreshing the page. While this functionality works, a problem arises when the form is subm ...

javascripthtmljqueryajaxforms

Customizing CSS Styles in ASP.NET MVC for Multilingual Websites

We are looking to make our ASP-MVC website multicilingual and support different languages. One challenge I am facing is how to apply distinct style-sheets for each language, especially when dealing with right-to-left (RTL) languages like Hebrew or Arabic c ...

jquerycssasp.net-mvc

Developing play and pause capabilities using JavaScript for the existing audio player

Currently, I am developing a Chrome extension that includes an HTML popup with buttons to play audio files. However, I feel that my current approach is not the most efficient and I am struggling to find ways to simplify the process. The method I am using n ...

javascriptjqueryhtmlaudiogoogle-chrome-extension

What could be causing the issue of CSS animation not functioning properly when used in conjunction with a

I am working on creating a switch button with CSS and JavaScript that needs an animation when toggling or clicked. The only issue I am facing is related to the animation. I am wondering if there might be any problem with the positioning (relative, absol ...

javascripthtmlcss

What steps should be taken to ensure that the onmouseover and onmouseout settings function correctly?

The Problem Currently, I have a setup for an online store where the shopping cart can be viewed by hovering over a div in the navigation menu. In my previous prototype, the relationship between the shoppingTab div and the trolley div allowed the shopping ...

javascriptjqueryhtmlcss

Form in HTML with Automatic Multiplication Functionality in pure JavaScript

I'm struggling with integrating a simplified HTML form with JavaScript to dynamically adjust and multiply the entered amount by 100 before sending it via the GET method to a specific endpoint. Below is the HTML form: <body> <form method= ...

javascripthtmlforms

Troubleshooting the issue: Unable to shift a div to the left in a Rails app using jQuery and CSS when a mouseover event occurs

Hey there, I'm working on a div that contains a map. My goal is to have the width of the div change from 80% to 50% when a user hovers over it. This will create space on the right side for an image to appear. I've been looking up examples of jqu ...

jqueryhtmlruby-on-railscss

The next column featuring a dropdown menu

My goal is to make this sketch operational. The red elements in the sketch need to be programmed. Currently, I am using angularJS and bootstrap with the following code: <div class="col-md-6"> <div class="form-group"> <label&g ...

javascripthtmlcssangularjsbootstrap-modal

The functionality of my PHP code for email transmission is currently malfunctioning

I'm having trouble sending mail from my HTML form using PHP. I've uploaded the necessary files to my hosting server but the mail is still not being sent. Here is my HTML code: <!-- Form --> <form action="http://example.com/sendEmail.php ...

phphtmlemail

Prevent event bubbling when clicking

I have a code snippet that I'm struggling with. <p>haha</p> <button class="btn btn-light" onclick="nextSibling.classList.toggle('d-none');"> <i class="fa fa-ellipsis-h"></i> </button> <div class= ...

javascripthtmlbootstrap-4event-bubbling

Switching the menu based on screen size successfully functions for the div element, however, it does not

Currently, I am working on creating a responsive menu. The structure of my menu is set up as follows: HTML: <ul id="top-menu"> <li class="active"> <a href="#">HOME</a> </li> <li> <a href="#div2">ABOUT</ ...

htmlcssmedia