Is it possible to animate multiple SVGs on a webpage with just the click of a button?

Is there a way to trigger the animation in the SVG each time a next/prev button is clicked while navigating through a carousel where the same SVG is repeated multiple times? The carousel is built using PHP and a while loop.

jQuery(document).ready(function($){
    $('.first').click(function(){
        $('animate')[0].beginElement();
        $('animateTransform')[0].beginElement();
    });
});

This is my SVG code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">

<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
    <line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" dur="2s" class="ani" />

    <line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>

<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" dur="2s" class="ani" />

    <text x="200" y="80" class="wt1">10'</text>
</g>
<g>
    <g>
        <text x="368" y="70" class="wt1">5'</text>      
    </g>
    <line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
    <animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" dur="3s" class="ani" />
    <animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" dur="3s" class="ani" />


    <line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
    <animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" dur="3s" class="ani" />
    <animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" dur="3s" class="ani" />
</g>
<g>
    <ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
    <animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" dur="3s" class="ani" />
    <animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" dur="3s" class="ani" />

    <g id="box1" transform="translate(0, 0)">
    <polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4 
            "/>
    <path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
    <polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5  "/>
    <path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>

    <animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" dur="3s" class="ani" />
    </g>

</g>
</svg>

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

javascriptjquerycssanimationsvg

Answer №1

You failed to include a question style sheet. I have reinstated the color values of the svg elements as per the diagram.
To ensure that all animations trigger simultaneously upon clicking, you can eliminate the need for Javascript

To achieve this, insert a launch command for each animation begin="Layer_1.click" 

.container {
 width:75%;
 height:75%;
 }
.st0 {fill:#C8C8C8;}
.st1 {fill:#E7E7E7;}
.st2 {fill:#6A6A6A;}
.st3 {stroke:#F6C44A;}
.st4 {fill:#323232;}
.st5 {fill:#CB9751;}
.st6 {fill:#E0B268;}
.st7 {fill:#C8A066;}
.st8 {fill:#E3C084;}
<div class="container">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">

<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
    <line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" begin="Layer_1.click" dur="2s" class="ani" />

    <line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>

<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" begin="Layer_1.click" dur="2s" class="ani" />

    <text x="200" y="80" class="wt1">10'</text>
</g>
<g>
    <g>
        <text x="368" y="70" class="wt1">5'</text>      
    </g>
    <line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
    <animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" begin="Layer_1.click" dur="3s"  class="ani" />
    <animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" begin="Layer_1.click" dur="3s"  class="ani" />


    <line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
    <animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" begin="Layer_1.click" dur="3s" class="ani" />
    <animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" begin="Layer_1.click" dur="3s" class="ani" />
</g>
<g>
    <ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
    <animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" begin="Layer_1.click" dur="3s" class="ani" />
    <animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" begin="Layer_1.click" dur="3s" class="ani" />

    <g id="box1" transform="translate(0, 0)">
    <polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4 
            "/>
    <path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
    <polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5  "/>
    <path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>

    <animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" begin="Layer_1.click" dur="3s" class="ani" />
    </g>

</g>
</svg>
</div>

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

How to style a CSS list and center-align it

My website features a <ul> list with submenus structured like this: <div id="cssmenu"> <ul> <li class='active'><a href='index.html'><span>Home</span></a></li> <li class=&ap ...

htmlcss

Having performance issues with an HTML5/JavaScript game on Internet Explorer 8

A new game has been developed using html/javascript. Due to confidentiality reasons, the code cannot be fully shared. The game runs smoothly on most browsers except for IE, which poses a challenge. Compatibility with IE8 is essential, despite its limitati ...

javascripthtmlinternet-explorer

Change the classes of the body prior to the initial rendering

I know this may seem like a difficult task, and I understand that what I want to achieve might be nearly impossible. My goal is to incorporate a dark/light mode switch on my website. The challenge lies in the fact that the site consists of static files on ...

javascripthtmlcssrepaint

Retrieving data from a different thread in JavaScript

After coming across this code snippet, I decided to try it out but faced some challenges. The function "IsValidImageUrl()" is meant to provide an instant result, however, due to running in a separate thread, retrieving the value proved difficult. Even with ...

javascriptjquerymultithreading

Using AngularJS to incorporate personalized font icons

Looking to create a custom font icon library similar to "Font Awesome" for my AngularJS project, as using fonts instead of images is more versatile across devices. Is there a way to achieve this? I have generated a font in .ttf and .svg formats with my ...

cssangularjsfont-facefont-awesomeglyphicons

Preserve dropdown selections in JavaScript even when the page is refreshed

Two dropdown menus are present, where the second dropdown menu is dependent on the selection made in the first dropdown. However, after refreshing the page following an ajax update, the second dropdown does not retain the previously selected choice. How ...

javascript

Tips for organizing a list of strings into columns within a React Bootstrap Table 2 without overflowing the designated columns

While working on rendering data in tabular form using react-bootstrap-table, I encountered an issue where the data in one column was overlapping with data from other columns. In order to maintain a fixed layout, I added the CSS layout:fixed, which was a ne ...

javascriptjsonreactjsreact-nativereact-bootstrap-table

What is the best way to display the value of a new object's property in Angular?

I am currently developing a list application that allows users to create new lists by entering a name and clicking a button. Once the list is created, users can add and remove items from the list. However, I have encountered an issue where the name of the ...

javascriptangularjsjavascript-objects

`Is there a way to manipulate the timer in JavaScript?`

My current project involves creating a timer in minutes and seconds. The user inputs the desired time in minutes into a textbox named "textbox2". However, when I attempt to retrieve the value of this input using `getElementById.value`, it returns a NULL er ...

javascripthtml

Explaining the Usage of Nav-pills in Bootstrap v4

I am looking to align my navigation bar across the width of the div. However, I am currently using Bootstrap v4 and the nav-justify class is not available yet. Below is the code snippet: <ul class="nav nav-pills"> <li class="nav-item"> ...

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Need assistance with passing a model and a string in MVC5?

Below is the code snippet I am working with: JavaScript: $(document).ready(function () { //Thing is model var things = [ { id: 1, color: 'yellow' }, { id: 2, color: 'blue' }, { id: 3, color: 'red&a ...

jqueryajaxasp.net-mvcc#-4.0

Retrieve the output of a Node.js function

I have a function that extracts data from a website and displays it in the console. However, I now want to return this data so I can perform additional actions with it. Instead of using console.log(temperature), I would like to retrieve the temperature v ...

javascriptnode.jsexpressreturncheerio

Adjust the element based on hover over the pseudo element

Looking to modify an element based on the hover state of a pseudo-element. Here's what I've tried so far, but it isn't working as expected: nav .logo { display: none; } nav:before{} nav:hover:before .logo { display: block; } I want th ...

htmlcssfrontendpseudo-element

I'm currently in the process of incorporating horizontal scrolling into various sections of an image gallery. The images will stack vertically only when the window width

I am currently developing an image gallery with multiple sections that contain various images. My goal is to arrange each section of images in a single row, allowing horizontal scrolling similar to Netflix's layout. However, I'm facing challenges ...

htmlcssgalleryhorizontal-scrolling

Utilizing the Model URL Parameter in VueJS

In the context of , my objective is to dynamically modify a range input element and reflect that change in the URL. // Incorporating URL update with range input manipulation var Hello = Vue.component('Hello', { template: ` <div> &l ...

javascriptnode.jsvue.jsvue-router

What steps can be taken to avoid activating CORS while performing a POST request?

I am submitting form data and I do not want CORS to be triggered when I make the HTTP request. Currently, I am using jQuery's $.ajax method as follows: $.ajax({ method: "POST", url: url, data: e.serialize(), cache: false, dataTyp ...

jqueryajaxhttpcors

Executing a function automatically when a component loads in react-redux can be achieved by utilizing useEffect hook in functional components

I have developed a webpage specifically designed to manage a "Cart" feature, with Cart details being fetched from a database. Upon clicking the "Click me" button, all the retrieved data is displayed within a react component. My goal now is to showcase the ...

javascriptreactjsreduxreact-redux

Identifying the moment a jquery-ui autocomplete appears using Selenium testing

Currently, I am in the process of designing a workflow using selenium and python with a remote webdriver connected to a locally running hub. Within this workflow, one task involves inputting text into a search autocomplete field and then waiting for the r ...

jquerypythonseleniumjquery-autocompletejquery-ui-autocomplete

Tips for retrieving data from a Node.js server with a POST request in a React application

I'm currently working on a MERN authentication project, but I've hit a roadblock. Whenever the information is submitted on my register page, it triggers an add user function on the front end. async function addUser(user) { const config = { ...

javascriptnode.jsreactjsexpressaxios

Using asynchronous functions in React Native still generates a promise despite the presence of the 'await' keyword

After making an API call, my react-native component is supposed to return some SVG. Despite using an async function with await, the function still returns a promise that has not resolved yet. I have seen similar questions asked before, but I am puzzled as ...

javascriptreact-nativeasync-await