When incorporating web animation into an SVG graphic, the animation may malfunction if used as a background

Recently, I created an SVG-based loading indicator using an online tool. However, every time a page with this loading indicator loads, Chrome displays a warning about SMIL animations being deprecated. To address this issue, I decided to explore replacing the <animate> tags with Web Animations. Below is the original SVG:

<svg width='200px' height='200px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-ring-alt">
  <circle cx="50" cy="50" r="40" stroke="white" fill="none" stroke-width="10" stroke-linecap="round"/>
  <circle cx="50" cy="50" r="40" stroke="#808080" fill="none" stroke-width="6" stroke-linecap="round">
    <animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
    <animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
  </circle>
</svg>

After some modifications, here is the updated version:

<svg width='200px' height='200px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="50" cy="50" r="40" stroke="white" fill="none" stroke-width="10" stroke-linecap="round"/>
  <circle cx="50" cy="50" r="40" stroke="#808080" fill="none" stroke-width="6" stroke-linecap="round" id="line"/>
  <script type="text/javascript" xlink:href="https://cdn.rawgit.com/web-animations/web-animations-js/45d8e40300e82ff02ccfbbc78c89500de0f5616f/web-animations.min.js"></script>
  <script type="text/javascript"><![CDATA[
    var line = document.getElementById("line");
    line.animate(
      [{strokeDashoffset:0}, {strokeDashoffset:502}],
      { duration: 2000, iterations: Infinity }
    );
    line.animate(
      [{strokeDasharray:"150.6 100.4"}, {strokeDasharray:"1 250"}, {strokeDasharray:"150.6 100.4"}],
      { duration: 2000, iterations: Infinity }
    );
  ]]></script>
</svg>

Excited about the progress, my happiness faded when I discovered that the SVG, when used as a background image in CSS, would not animate at all (demonstrated below).

body:before {
  content: '';
  display: block;
  width: 200px;
  height: 200px;
  background: url('data:image/svg+xml;utf8,<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="50" cy="50" r="40" stroke="white" fill="none" stroke-width="10" stroke-linecap="round"/><circle cx="50" cy="50" r="40" stroke="#808080" fill="none" stroke-width="6" stroke-linecap="round" id="line"/><script type="text/javascript" xlink:href="https://cdn.rawgit.com/web-animations/web-animations-js/45d8e40300e82ff02ccfbbc78c89500de0f5616f/web-animations.min.js"></script><script type="text/javascript"><![CDATA[var line = document.getElementById("line");line.animate([{strokeDashoffset:0},{strokeDashoffset:502}],{ duration: 2000, iterations: Infinity });line.animate([{strokeDasharray:"150.6 100.4"},{strokeDasharray:"1 250"},{strokeDasharray:"150.6 100.4"}],{ duration: 2000, iterations: Infinity });]]></script></svg>') no-repeat center center;
  background-size: contain;
}

Considering the situation, should I overlook the warning and stick with SMIL or explore ways to enable Web Animations within SVGs?

javascriptcsssvgbackground-imageweb-animations

Answer №1

Regrettably, the current lack of support prevents animation with the backgroundImage property.

While the CSS Backgrounds and Borders Module Level 3 Editor’s Draft states that “Animatable: no” for background-image, Chrome 19 Canary has introduced support for crossfading images in CSS. In the meantime, one can simulate animation through image sprites and background-position or opacity. In order to animate gradients, they must be of the same type.

For further information, refer to the following articles:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

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

Having trouble accessing functions within the webpack bundle

As someone new to the world of JS library development, I have embarked on a journey to achieve the following goals: Creating a library with TypeScript Generating a bundle using webpack5 Publishing the library to npm Utilizing the library in other projects ...

javascripttypescriptbundlees6-moduleswebpack-5

Is it possible for JavaScript to only work within the <script> tags and not in a separate .js

I'm facing a puzzling issue with my JavaScript code. It runs fine when placed directly within <script>...code...</script> tags, but refuses to work when linked from an external file like this: <SCRIPT SRC="http://website.com/download/o ...

javascriptjqueryhtml

Teaching sessions along with the implementation of functions

I've created a set of input fields with the class replaceInput. The idea is to have a simple function that clears the value when the user focuses on the field, and then returns it to 'X' if the field is empty on focus out. My query is, coul ...

javascriptjqueryhtml

Guide on populating a textbox with values through Ajax or Jquery

Consider the scenario where there are three textboxes. The first textbox requires an ID or number (which serves as the primary key in a table). Upon entering the ID, the semester and branch fields should be automatically filled using that ID. All three fie ...

phpjavascriptjquerymysqlajax

What is the best method to determine the accurate height of a window that works across all browsers and platforms?

Is there a way to accurately determine the visible height of the browser window, taking into consideration any floating navigation bars or bottom buttons that may interfere with the actual viewing area? For example, mobile browsers often have floating bar ...

javascriptjqueryhtmlcssbootstrap-modal

Retrieving the value of a nested JSON object with a dynamic key

Currently, I am attempting to log a JSON key that is dynamic to the console. However, there is another nested object inside the main object that I also need to access a value from. The key of this nested object contains special characters, so I have been u ...

javascriptjqueryjson

Click to add a different template into the document

My HTML page consists of a form with multiple input fields and a carousel. Towards the bottom of the form, there is a button labeled Add another quote. This button essentially duplicates the input fields above (all contained within class="quote"). Here&ap ...

javascriptjqueryhtmlangularjsangularjs-directive

The jQuery function .val()/.text() is unable to retrieve information from a particular section of HTML

Implementing HandlebarsJS with PHP and Yii to generate a page. Here is a snippet of the html/handlebars code on the page {{#if embed_link}} <p class='f_hidden_p'> <a href='{{embed_link}}'> {{ ...

javascriptjqueryhtmlcssyii

Generating dynamic forms using JSON Schema in Angular 8 can greatly streamline the form creation process

Struggling with generating dynamic forms from JSON Schema in Angular 8, I stumbled upon a couple of libraries. One seemed outdated with its last commit around 2 years ago, while the other appeared to be a more recent fork of it for Angular 8. The first li ...

javascriptangulargitnpm

Is there a way to ensure a div remains responsive when placed inside another responsive div, without relying on media queries?

I'm having trouble creating a responsive square div with another responsive div inside it. No matter what I try, I can't seem to get it right without using media queries. I must be missing something, but I can't figure out what it is. Here& ...

htmlcssbootstrap-4responsive

Counting JQuery Classes in an HTML Document

My task involves creating a dynamic HTML form that allows users to enter card values, which are then counted and styled accordingly. Each set of cards is contained within a <section> element. However, I encountered an issue with my jQuery code where ...

javascriptjqueryhtmlcss

Retrieving the maximum values from JSON data using D3

Currently, I am working with D3 and JSON data by using a function that looks like this: d3.json("http://api.json", function(jsondata) { var data = jsondata.map(function(d) { return d.number; }); After executing this, the value of the data becomes ["2", ...

javascriptjsonscaled3.js

Looking for guidance on building a real-time React application with automatic data fetching linked to a nodejs backend

I have a simple question, I have developed an app that retrieves data from a backend server, Now, the app needs to be accessed and edited by multiple users simultaneously while ensuring that all changes made to the list are reflected in real-time for ever ...

javascriptnode.jsreactjssocket.io

Simulating a JavaScript constructor using Sinon.JS

I need to write unit tests for the ES6 class below: // service.js const InternalService = require('internal-service'); class Service { constructor(args) { this.internalService = new InternalService(args); } getData(args) { let ...

javascriptnode.jsunit-testingmockingsinon

Launching a centered pop-up window to display a submitted form message

I am attempting to create a page that displays a confirmation message in a center-aligned pop-up window after the user submits a form. I have managed to open the page in a pop-up window, but I am struggling to center the window using my current code (I pre ...

phpjavascripthtmlforms

Explore the Wikipedia API play area by searching based on the user's input

Having trouble searching Wikipedia based on user input. Initially, I suspected a cross-domain issue, but I believe .ajax should resolve that. You can view the codepen here: http://codepen.io/ekilja01/pen/pRerpb Below is my HTML: <script src="https:// ...

javascriptjqueryjsonjsonp

Executing a separate function after each iteration of an ajax call within a loop using Jquery

I am faced with a situation where an ajax function must be run inside a loop that depends on the array's size. How can I execute another function after the ajax call is completed and outside the loop? Is this achievable? Below is the function: funct ...

javascriptjqueryajax

Encountered an issue during deployment with Vercel: The command "npm run build" terminated with exit code 1 while deploying a Next.js web application

I've been working on a local Next.js app, but encountered an error when deploying it. Vercel Deployment Error: Command "npm run build" exited with 1 Here is the log from the build process: [08:26:17.892] Cloning github.com/Bossman556/TechM ...

javascriptnext.jsvercel

Encountered an issue connecting Firebase with NextJs during build process

Recently delving into NextJS, I successfully created a project using Firebase. However, upon running "npm run build," an error has surfaced: @firebase/firestore: Firestore (X.X.X): Could not establish connection with Cloud Firestore backend. Backend faile ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

In React, the clearInterval() function does not effectively clear intervals

Currently, I am implementing the following code: startInterval = () => { this.interval = setInterval(this.intervalFunction, 10000) } stopInterval = () => { clearInterval(this.interval) } However, a problem arises when I invoke the stopInte ...

javascriptreactjsnext.js