What are some techniques for animating SVG images?

Looking to bring some life to an SVG using the jQuery "animate" function.

The plan is to incorporate rotation or scaling effects.

My initial attempt with this simple code hasn't yielded the desired results:

$("#svg").animate({
  transform: "scale(0.4)"
}, 400)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="svg">
<svg width="100%" height="100%">
    <svg width="100%" ID="piece" y="0" x="0" class="black" height="100%">
        <g transform="translate(0.005) scale(0.022)">
            <path d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
        </g>
    </svg>

I tried adding 

$("#svg").css({transform: "scale(0.4)"})
to directly apply a scale style, which did work successfully.

Seeking guidance on how to resolve the issue of animating the SVG element. Any assistance would be greatly appreciated. Thank you.

javascriptjqueryhtmlcsssvg

Answer №1

You're looking to add animation and reduce the size of the SVG, right? Check out this code snippet where it's implemented:

$("#svg").animate({
  width: "10%", height: "10%"
}, 400)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="svg">
<svg width="100%" height="100%">
    <svg width="100%" ID="piece" y="0" x="0" class="black" height="100%">
        <g transform="translate(0.005) scale(0.022)">
            <path d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
        </g>
    </svg>

For more information on using the animate function, visit the documentation here

Alternatively, you can achieve the same effect with CSS:

#svg {
  animation: reduce 2s 2; /* To make the animation twice */
}
@keyframes reduce {
    from {transform : scale(1);}
    to {transform : scale(0.4);}
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200px" viewBox="0 0 1 1" style="fill:purple;stroke:red" id="svg">
<svg width="100%" height="100%">
    <svg width="100%" ID="piece" y="0" x="0" class="black" height="100%">
        <g transform="translate(0.005) scale(0.022)">
            <path d="M 22 9 C 19.792 9 18 10.792 18 13 C 18 13.885103 18.29397 14.712226 18.78125 15.375 C 16.829274 16.496917 15.5 18.588492 15.5 21 C 15.5 23.033947 16.442042 24.839082 17.90625 26.03125 C 14.907101 27.08912 10.5 31.578049 10.5 39.5 L 33.5 39.5 C 33.5 31.578049 29.092899 27.08912 26.09375 26.03125 C 27.557958 24.839082 28.5 23.033948 28.5 21 C 28.5 18.588492 27.170726 16.496917 25.21875 15.375 C 25.70603 14.712226 26 13.885103 26 13 C 26 10.792 24.208 9 22 9 z " />
        </g>
    </svg>

I've set the animation to run twice, but you can customize it using the animation-iteration-count property. Check out the documentation here

Hope this information is helpful to you!

Answer №2

Check out the great web tool created by SVG Gator:

You will find a variety of animation assets available.

Sincerely,

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

AngularJS ng-show will not function properly with newly added DOM elements

I am encountering an issue with ng-show directives on dynamically added DOM elements in AngularJS. The directives work fine when the page initially loads, but new elements that are added later do not have their expressions evaluated. Is there a way to prom ...

javascriptangularjsng-show

Error: Badge not responsive in Boostrap 4

I have a project to create a table of contents using BOOTSTRAP4. I researched and used https://getbootstrap.com/docs/4.6/components/list-group/. However, the Badge does not align correctly as expected, it remains fixed with the content. <ul class=&qu ...

htmlcssbootstrap-4

Trouble with CSS: Struggling to apply margins to a line of images in React JS

I've encountered an issue where I can't seem to add margin to the row of images. The margin appears fine without any CSS when viewed on a wide screen, but once I scale it down to mobile view, the margin disappears completely. Even after attemptin ...

cssreactjssassflexbox

Troubles with setting up node modules in a Windows 10 environment

I'm encountering difficulties when trying to install modules on my Windows 10 laptop after setting up Node.js from scratch. Since it's my personal computer, I have complete control over the system. Despite searching through various online forum ...

javascriptnode.jsnpmnpm-install

AppProps in Next.js - Ensure that you have the correct loader set up to handle this specific file type as there are currently no loaders configured for processing it

I've encountered an issue while working on a Next.JS 13.5.6 application in development mode. When I try to connect to the site, I receive an error message. However, everything works fine when I switch to production mode after building and starting the ...

javascriptreactjstypescriptwebpacknext.js

What is the best way to eliminate a count from an array when a button is deselected using JavaScript?

Whenever a button is selected, the value appears on the console.log as expected when using an array. To enhance this functionality, I also need to find a way to remove the value from the console when the button is deselected. var totalWishlist = []; $( ...

javascriptjquery

Utilizing TypeScript to Populate an observableArray in KnockoutJS

Is there a way to populate an observableArray in KnockoutJS using TypeScript? My ViewModel is defined as a class. In the absence of TypeScript, I would typically load the data using $.getJSON(); and then map it accordingly. function ViewModel() { var ...

javascriptjsonknockout.jstypescript

What is the best way to divide an array while extracting data from a JSON object using

Currently, I am parsing the json data. My goal is to find a specific property within the json object that contains two nested arrays (list and array). However, when extracting the values, they are all being stored in a single array. Is there a way to separ ...

javascriptjqueryarraysjson

I'm struggling to understand why the background-color is affecting the margins as well

Check out this code snippet: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <style type="text/css"> * {border: 0px; padding: 0px;} ...

cssmarginbackground-color

Error! React is unable to find the window object

I recently added the "react-speech" package to my application in order to incorporate text-to-speech functionality. However, upon importing the package, I encountered an error that has been challenging to resolve despite extensive research. Any assistance ...

javascriptnode.jsreactjswebnpm

How to switch around div elements using CSS

There are two unordered list items in a container div and one swap button. When the swap button is clicked, the order of items needs to change. This functionality can be achieved using the following swap function. var ints = [ "1", "2", "3", "4" ], ...

javascripthtmlcss

The o-gradient feature is not compatible with Mac and Linux operating systems

Hello there! I am facing an issue with creating a gradient on my website without using an image. Surprisingly, the gradient appears on Windows but not on Mac or Linux operating systems. Any idea why this might be happening? You can check out the website he ...

htmlcss

Utilizing jQuery and Isotope for intricate filtering

My isotope instance contains elements with multiple parameters, as shown below: <element data-a="1 2 3 4 5" data-b="1 2 3 4 5" data-c="1 2 3 4 5" Filtering for an element that has A1, B2, and C3 is straightforward: .isotope({ filter: '[data-a~=1 ...

javascriptjqueryjquery-selectorsjquery-isotope

How can I dynamically update the status displayed in a DIV tag using PHP code?

I'm working on a web page where I am downloading data one by one in a continuous loop. Once each download is complete, I need to update the status displayed in a DIV tag on the webpage. The server connection and data download are handled by PHP code, ...

javascriptphp

Troubleshooting directive not functioning properly with AngularJS ng-click

My HTML img tag is not responding to ng-click when clicked. I'm puzzled by this issue occurring in masonryPictureView.html Main page - home.html <ng-masonry> <ng-picture ng-items="projectdescription.pictures"></ng-picture> </n ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-click

Styling with CSS: Proper alignment of elements within a div container

I'm struggling with positioning three elements within a div. The left element needs to be on the left, the middle element centered, and the right element on the right. Here's what I have so far in my CSS: #left-element { margin-left: 9px; ...

csspositioninghtml

Python Flask server struggling to find JavaScript and CSS files within index.html when paired with AngularJS frontend

I'm currently working on a simple website project that involves a Python backend running on Flask and an AngularJS frontend. The main issue I am facing is encountering 404 errors when the index template tries to load CSS and JS files. Here's how ...

javascriptpythonangularjs

Help with guiding and redirecting links

Here's the code snippet: <script> if(document.location.href.indexOf('https://thedomain.com/collections/all?sort_by=best-selling') > -1) { document.location.href = 'https://thedomain.com/pages/bestsellers'; } </script& ...

javascriptcssif-statementshopifyhttp-redirect

CSS Dynamix - Include the parameter ?value to resolve caching issues

I came across a discussion on the issue of Dynamic CSS caching problem where it was suggested to append ?value to the end of the css file name for better caching. I am currently using themes and the css files are loaded automatically. Is it possible to use ...

csscachinghttphandler

Ways to extract metadata from a given URL

Recently, I've delved into the world of JavaScript and I'm looking to extract metadata from a given URL. Whenever a URL is entered into an input field, I want to retrieve its meta data - a simple task in HTML using JavaScript. However, every time ...

javascripthtml