What is the best way to reset the animationTransform using JavaScript?

Incorporating SMIL animations in Firefox is presenting a challenge for me. The animation starts automatically upon page load, but I need to find a way to trigger it dynamically through JavaScript. I suspect that the issue may lie with the begin attribute. Any suggestions on how I can achieve this? I have included my code below for your review.

Thank you!

HTML

<svg width="710px" height="231px" viewBox="0 0 710 231">
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com  -->
<title>Chart_IncreaseInAttacks</title>
<desc>Created with Sketch.</desc>
<defs>
  <clipPath id="clip-path-increaseinattacks" class="graph-clipath active">
     <path x="150" y="0" height="300" transform= translate(-505,0) width="505"
      d="M150,75 L643,75 C649.627417,75 655,80.372583 655,87 L655,87 C655,93.627417 649.627417,99 643,99 L150,99 L150,75 Z"
      id="Rectangle-Copy-15" fill="#0F54AF" fill-rule="nonzero">
       <animateTransform 
      attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="-505,0; 0,0" 
        begin="0s"
        calcMode="spline"
        keySplines= ".4,0,.78,.69"
        dur="0.3s" 
        fill="freeze"/>
    </path>
     <path x="150" y="0" height="300" transform = translate(-505,0) width="505"
      d="M150,117 L499,117 C505.627417,117 511,122.372583 511,129 L511,129 C511,135.627417 505.627417,141 499,141 L150,141 L150,117 Z"
      id="Rectangle-Copy-18" fill="#009FDB" fill-rule="nonzero">
       <animateTransform 
      attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="-505,0; 0,0" 
        begin="0.3s"
        calcMode="spline"
        keySplines= ".4,0,.78,.69" 
        dur="0.3s" 
        fill="freeze"/>
    </path>
     <path x="150" y="0" height="300" transform= translate(-505,0) width="505"
      d="M150,159 L239,159 C245.627417,159 251,164.372583 251,171 L251,171 C251,177.627417 245.627417,183 239,183 L150,183 L150,159 Z"
      id="Rectangle-Copy-19" fill="#30D1FF" fill-rule="nonzero">
       <animateTransform 
      attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="-505,0; 0,0" 
        begin="0.6s"
        calcMode="spline"
        keySplines= ".4,0,.78,.69"
        dur="0.3s" 
        fill="freeze"/>
    </path>
 </clipPath>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  <g id="ATT-CS-Report02_SecurityRiskLandscape" transform="translate(-245.000000, -440.000000)">
  <g id="Chart_IncreaseInAttacks" transform="translate(245.000000, 440.000000)">
  <rect id="Rectangle-Copy-14" fill="#F6F6F6" fill-rule="nonzero" x="0" y="0" width="710" height="231"></rect>
  <text id="Increase-in-attacks" font-size="15" font-weight="bold" line-spacing="22" fill="#009FDB">
  <tspan x="42" y="40">Increase in attacks in 2018</tspan>
  </text>
  <text id="Ransomware-attacks" font-size="11" font-weight="normal" line-spacing="14" fill="#191919">
  <tspan x="68.462" y="83">Ransomware </tspan>
  <tspan x="96.765" y="97">attacks</tspan>
  </text>
  <text id="Spear-phishing-attac" font-size="11" font-weight="normal" line-spacing="14" fill="#191919">
  <tspan x="58.199" y="167">Spear-phishing</tspan>
  <tspan x="96.765" y="181">attacks</tspan>
  </text>
  <text id="Spoofing/BEC-attacks" font-size="11" font-weight="normal" line-spacing="14" fill="#191919">
  <tspan x="83.301" y="125">Spoofing/</tspan>
  <tspan x="74.27" y="139">BEC attacks</tspan>
  </text>

    <path clip-path="url(#clip-path-increaseinattacks)" id="kk"
  d="M150,75 L643,75 C649.627417,75 655,80.372583 655,87 L655,87 C655,93.627417 649.627417,99 643,99 L150,99 L150,75 Z"
  id="Rectangle-Copy-15" fill="#0F54AF" fill-rule="nonzero"> </path>
  <path clip-path="url(#clip-path-increaseinattacks)"
  d="M150,117 L499,117 C505.627417,117 511,122.372583 511,129 L511,129 C511,135.627417 505.627417,141 499,141 L150,141 L150,117 Z"
  id="Rectangle-Copy-18" fill="#009FDB" fill-rule="nonzero"></path>
  <path clip-path="url(#clip-path-increaseinattacks)"
   d="M150,159 L239,159 C245.627417,159 251,164.372583 251,171 L251,171 C251,177.627417 245.627417,183 239,183 L150,183 L150,159 Z"
   id="Rectangle-Copy-19" fill="#30D1FF" fill-rule="nonzero"></path>


   <path d="M150.5,68.5 L150.5,190" id="Line-3-Copy" stroke="#191919" stroke-linecap="square" fill-rule="nonzero"></path>
   <text id="350%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
   <tspan x="159" y="90">350%</tspan>
   </text>
   <text id="250%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
    <tspan x="159" y="132">250%</tspan>
   </text>
   <text id="70%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
   <tspan x="159" y="174">70%</tspan>
   </text>
</g>
</g>
</g>
</svg>

javascripthtmlcsssvg

Answer №1

To initiate an animation, you can utilize the beginElement function in your code.

I have linked subsequent animations to the first one for seamless operation.

<button onclick="document.getElementById('t1').beginElement()">trigger</button>
<svg width="710px" height="231px" viewBox="0 0 710 231">
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com  -->
<title>Chart_IncreaseInAttacks</title>
<desc>Created with Sketch.</desc>
<defs>
  <clipPath id="clip-path-increaseinattacks" class="graph-clipath active">
     <path x="150" y="0" height="300" transform= translate(-505,0) width="505"
      d="M150,75 L643,75 C649.627417,75 655,80.372583 655,87 L655,87 C655,93.627417 649.627417,99 643,99 L150,99 L150,75 Z"
      id="Rectangle-Copy-15" fill="#0F54AF" fill-rule="nonzero">
       <animateTransform 
        id="t1"
        attributeName="transform" type="translate"
        values="-505,0; 0,0" 
        begin="indefinite"
        calcMode="spline"
        keySplines=".4,0,.78,.69"
        dur="0.3s" fill="freeze"/>
    </path>
     <path x="150" y="0" height="300" transform = translate(-505,0) width="505"
      d="M150,117 L499,117 C505.627417,117 511,122.372583 511,129 L511,129 C511,135.627417 505.627417,141 499,141 L150,141 L150,117 Z"
      id="Rectangle-Copy-18" fill="#009FDB" fill-rule="nonzero">
       <animateTransform 
        id="t2"
        attributeName="transform" type="translate"
        values="-505,0; 0,0" 
        begin="t1.end"
        calcMode="spline"
        keySplines=".4,0,.78,.69" 
        dur="0.3s" 
        fill="freeze"/>
    </path>
     <path x="150" y="0" height="300" transform= translate(-505,0) width="505"
      d="M150,159 L239,159 C245.627417,159 251,164.372583 251,171 L251,171 C251,177.627417 245.627417,183 239,183 L150,183 L150,159 Z"
      id="Rectangle-Copy-19" fill="#30D1FF" fill-rule="nonzero">
       <animateTransform 
       attributeName="transform" type="translate"
        values="-505,0; 0,0" 
        begin="t2.end"
        calcMode="spline"
        keySplines=".4,0,.78,.69"
        dur="0.3s"  
        fill="freeze"/>
    </path>
 </clipPath>
</defs>
 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  <g id="ATT-CS-Report02_SecurityRiskLandscape" transform="translate(-245.000000, -440.000000)">
  <g id="Chart_IncreaseInAttacks" transform="translate(245.000000, 440.000000)">
  <rect id="Rectangle-Copy-14" fill="#F6F6F6" fill-rule="nonzero" x="0" y="0" width="710" height="231"></rect>
  <text id="Increase-in-attacks" font-size="15" font-weight="bold" line-spacing="22" fill="#009FDB">
  <tspan x="42" y="40">Increase in attacks in 2018</tspan>
  </text>
  <text id="Ransomware-attacks" font-size="11" font-weight="normal" line-spacing="14" fill="#191919">
  <tspan x="68.462" y="83">Ransomware </tspan>
  <tspan x="96.765" y="97">attacks</tspan>
  </text>
  <text id="Spear-phishing-attac" font-size="11" font-weight="normal" line-spacing="14" fill="#191919">
  <tspan x="58.199" y="167">Spear-phishing</tspan>
  <tspan x="96.765" y="181">attacks</tspan>
  </text>
  <text id="Spoofing/BEC-attacks" font-size="11" font-weight="normal" line-spacing="14" fill="#191919">
  <tspan x="83.301" y="125">Spoofing/</tspan>
  <tspan x="74.27" y="139">BEC attacks</tspan>
  </text>
    
    
    <path clip-path="url(#clip-path-increaseinattacks)" id="kk"
  d="M150,75 L643,75 C649.627417,75 655,80.372583 655,87 L655,87 C655,93.627417 649.627417,99 643,99 L150,99 L150,75 Z"
  id="Rectangle-Copy-15" fill="#0F54AF" fill-rule="nonzero"> </path>
  <path clip-path="url(#clip-path-increaseinattacks)"
  d="M150,117 L499,117 C505.627417,117 511,122.372583 511,129 L511,129 C511,135.627417 505.627417,141 499,141 L150,141 L150,117 Z"
  id="Rectangle-Copy-18" fill="#009FDB" fill-rule="nonzero"></path>
  <path clip-path="url(#clip-path-increaseinattacks)"
   d="M150,159 L239,159 C245.627417,159 251,164.372583 251,171 L251,171 C251,177.627417 245.627417,183 239,183 L150,183 L150,159 Z"
   id="Rectangle-Copy-19" fill="#30D1FF" fill-rule="nonzero"></path>
    
    
    
    <path d="M150.5,68.5 L150.5,190" id="Line-3-Copy" stroke="#191919" stroke-linecap="square" fill-rule="nonzero"></path>
    <text id="350%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
    <tspan x="159" y="90">350%</tspan>
    </text>
    <text id="250%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
    <tspan x="159" y="132">250%</tspan>
    </text>
    <text id="70%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
    <tspan x="159" y="174">70%</tspan>
    </text>
</g>
</g>
</g>
</svg>

Answer №2

If you need to restart the animation, use the beginElement() method. I have adjusted the code accordingly:

The first animateTransform is identified by id = "a". The second animateTransform is identified by id = "b" and starts when the 'a' animation ends: begin="a.end". The third animateTransform begins when the 'b' animation ends: begin="b.end".

I trust this information will be helpful. 

svg.addEventListener("click",()=>{
  a.beginElement()
})
<svg id="svg" width="710px" height="231px" viewBox="0 0 710 231">
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com  -->
<title>Chart_IncreaseInAttacks</title>
<desc>Created with Sketch.</desc>
<defs>
  <clipPath id="clip-path-increaseinattacks" class="graph-clipath active">
     <path x="150" y="0" height="300" transform= translate(-505,0) width="505"
      d="M150,75 L643,75 C649.627417,75 655,80.372583 655,87 L655,87 C655,93.627417 649.627417,99 643,99 L150,99 L150,75 Z"
      id="Rectangle-Copy-15" fill="#0F54AF" fill-rule="nonzero">
       <animateTransform 
        id="a"
      attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="-505,0; 0,0" 
        begin="0s;"
        calcMode="spline"
        keySplines= ".4,0,.78,.69"
        dur="0.3s" 
        fill="freeze"/>
    </path>
     <path x="150" y="0" height="300" transform = translate(-505,0) width="505"
      d="M150,117 L499,117 C505.627417,117 511,122.372583 511,129 L511,129 C511,135.627417 505.627417,141 499,141 L150,141 L150,117 Z"
      id="Rectangle-Copy-18" fill="#009FDB" fill-rule="nonzero">
       <animateTransform 
        id="b"
      attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="-505,0; 0,0" 
        begin="a.end"
        calcMode="spline"
        keySplines= ".4,0,.78,.69" 
        dur="0.3s" 
        fill="freeze"/>
    </path>
     <path x="150" y="0" height="300" transform= translate(-505,0) width="505"
      d="M150,159 L239,159 C245.627417,159 251,164.372583 251,171 L251,171 C251,177.627417 245.627417,183 239,183 L150,183 L150,159 Z"
      id="Rectangle-Copy-19" fill="#30D1FF" fill-rule="nonzero">
       <animateTransform 
      attributeType="XML" 
        attributeName="transform" 
        type="translate"
        values="-505,0; 0,0" 
        begin="b.end"
        calcMode="spline"
        keySplines= ".4,0,.78,.69"
        dur="0.3s" 
        fill="freeze"/>
    </path>
 </clipPath>
</defs>
 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
  <g id="ATT-CS-Report02_SecurityRiskLandscape" transform="translate(-245.000000, -440.000000)">
  <g id="Chart_IncreaseInAttacks" transform="translate(245.000000, 440.000000)">
  <rect id="Rectangle-Copy-14" fill="#F6F6F6" fill-rule="nonzero" x="0" y="0" width="710" height="231"></rect>
  <text id="Increase-in-attacks" font-size="15" font-weight="bold" line-spacing="22" fill="#009FDB">
  <tspan x="42" y="40">Increase in attacks in 2018</tspan>
  </text>
  <text id="Ransomware-attacks" font-size="11" font-weight="normal" line-spacing="14" fill="#191919">
  <tspan x="68.462" y="83">Ransomware </tspan>
  <tspan x="96.765" y="97">attacks</tspan>
  </text>
  <text id="Spear-phishing-attac" font-size="11" font-weight="normal" line-spacing="14" fill="#191919">
  <tspan x="58.199" y="167">Spear-phishing</tspan>
  <tspan x="96.765" y="181">attacks</tspan>
  </text>
  <text id="Spoofing/BEC-attacks" font-size="11" font-weight="normal" line-spacing="14" fill="#191919">
  <tspan x="83.301" y="125">Spoofing/</tspan>
  <tspan x="74.27" y="139">BEC attacks</tspan>
  </text>
  
   
    
    <path clip-path="url(#clip-path-increaseinattacks)" 
  d="M150,75 L643,75 C649.627417,75 655,80.372583 655,87 L655,87 C655,93.627417 649.627417,99 643,99 L150,99 L150,75 Z"
  id="Rectangle-Copy-15" fill="#0F54AF" fill-rule="nonzero"> </path>
  <path clip-path="url(#clip-path-increaseinattacks)"
  d="M150,117 L499,117 C505.627417,117 511,122.372583 511,129 L511,129 C511,135.627417 505.627417,141 499,141 L150,141 L150,117 Z"
  id="Rectangle-Copy-18" fill="#009FDB" fill-rule="nonzero"></path>
  <path clip-path="url(#clip-path-increaseinattacks)"
   d="M150,159 L239,159 C245.627417,159 251,164.372583 251,171 L251,171 C251,177.627417 245.627417,183 239,183 L150,183 L150,159 Z"
   id="Rectangle-Copy-19" fill="#30D1FF" fill-rule="nonzero"></path>
    
    
    
    <path d="M150.5,68.5 L150.5,190" id="Line-3-Copy" stroke="#191919" stroke-linecap="square" fill-rule="nonzero"></path>
    <text id="350%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
    <tspan x="159" y="90">350%</tspan>
    </text>
    <text id="250%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
    <tspan x="159" y="132">250%</tspan>
    </text>
    <text id="70%" font-size="12" font-weight="bold" line-spacing="16" fill="#FFFFFF">
    <tspan x="159" y="174">70%</tspan>
    </text>
</g>
</g>
</g>
</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

Sliding divider across two div containers with full width

Seeking a JavaScript/jQuery function for a full page slider functionality. The HTML structure I'm working with is as follows: My objectives are twofold: Both slide1 and slide2 should occupy the full width of the page. Additionally, I am looking for ...

javascriptjqueryhtmlcssfullpage.js

What methods does React Router use to extract typed parameters from path strings?

(This question is about understanding functionality, not asking for a step-by-step guide) While using React Router, I noticed that Vscode IntelliSense can offer strongly-typed suggestions when I input parameters in a route like this: <Route path=&apos ...

javascripttypescriptvisual-studio-codereact-routerintellisense

Having trouble getting Laravel Full Calendar to function properly with a JQuery and Bootstrap theme

Using the Laravel full calendar package maddhatter/laravel-fullcalendar, I am facing an issue where the package is not recognizing my theme's jQuery, Bootstrap, and Moment. I have included all these in the master blade and extended it in this blade. ...

javascriptjquerylaravellaravel-5bootstrap-4

Creating a custom event handler for form input changes using React hooks

A unique React hook was created specifically for managing form elements. This hook provides access to the current state of form fields and a factory for generating change handlers. While it works seamlessly with text inputs, there is a need to modify the c ...

javascriptreactjstypescript

Bootstrap Collapse feature fails to collapse on Twitter

I'm having trouble with the bootstrap collapse navbar. It expands fine, but I can't seem to collapse the navigation. Everything seems correct in my code: <nav class="navbar navbar-inverse nav-justified"> <div class="navbar- ...

javascriptjquerycsstwitter-bootstrap

Challenges arise when attempting to authenticate a user with password.js

Currently, I am working on implementing validation using passport.js and ES6. Below is the validation function that I have created: passport.use(new BasicStrategy( function(login, password, callback) { User.findOne({ login: login }).select(&a ...

javascriptnode.jsvalidationpassport.jses6-promise

Issues with jquery gui elements in Chrome extension being unresponsive

Using chrome extensions and jquery to create a customized GUI, but running into issues with displaying the jquery elements on the HTML page. Can anyone spot what might be the problem? manifest.json: { "name": "my extension", "description": "my first ...

javascriptjqueryhtmlgoogle-chrome-app

What could be causing the issue with this JS code?

var feedback = {}; feedback.data = ["Great!", "See ya", "Not a fan..."]; feedback.display = function() { this.data.forEach(function(item) { console.log(feedback.display()); }); } The goal here is to showcase the content stored within the ...

javascript

Can BeautifulSoup be utilized to retrieve CSS from a webpage?

Currently, I am tackling a project that necessitates the full view of a webpage instead of just scattered lines entwined with images in HTML format. Is there a method to parse CSS alongside HTML using BeautifulSoup? Below is an excerpt from my code: from ...

pythonhtmlpython-3.xweb-scrapingbeautifulsoup

Setting up 'ngProgress' as a loader in my project using the 'ngbp boilerplate' is straightforward and easily customizable

Currently, I am utilizing the 'ngbp' angular boilerplate from GitHub to develop my project. My goal is to implement ngProgress for displaying a loader when navigating between sections. I have successfully installed ngProgress via bower and ensur ...

javascriptangularjs

Incorporate React into current Node express application by utilizing a content delivery network (CD

I'm currently in the process of developing a web application utilizing both Node and React. Instead of having separate Node and React applications, I decided to integrate React directly into my existing setup. To achieve this, I attempted importing th ...

javascriptnode.jsreactjscdn

Problem with li:before not displaying correctly in IE8

I've encountered an issue with a list menu on one of our recently developed websites. The problem lies in using li:before to display a | before each item in the menu. Here is the CSS code I am using: #menu li:first-child:before { content:""; ...

htmlcsshtml-listspseudo-element

Creating a Map in TypeScript from an Array

I have a series of TypeScript objects structured like this: interface MyObject { id: string, position: number } My goal is to transform this array into a map format where it shows the relationship between id and position, as needed for a future JSON ...

javascriptarraysjsontypescriptecmascript-6

Tips for positioning the calendar icon inside the input field using Angular Material

Just beginning my journey with Angular Material and currently focusing on building a datepicker. I am looking to reposition the icon from outside of the input field to inside. After trying out various Material themes, none seem to have this specific style. ...

htmlcssangulardatepickerangular-material

"Improve text visibility on your website with Google PageSpeed's 'Ensure text remains visible' feature, potentially saving you

Click here for the image reference showing the 0ms potential saving message I'm having trouble with a warning in Google PageSpeed and I've tried everything. This is the code I'm using to define the font-family: @font-face { font-family: ...

htmlangularseofont-facepagespeed

Can we safely save a value in session storage directly from the main.js file in Vue?

Throughout the user session managed by Vuex, I have a session storage value set to false that needs to be monitored. Setting up this value directly from the main.js file looks like this: import { createApp } from 'vue'; import App from './Ap ...

javascriptvue.jsvuexsession-storage

Redirecting script upon successful connection detection

I have created a script that checks for internet connectivity using an image, and redirects if internet is available. However, the issue is that it caches the images, leading to attempts to load them even when offline. Is there a different approach I can ...

javascripthtml

Discovering the color of a locator (Button/Label) through a CSS locator in Selenium: What's the method?

I have a set of automation scripts in place that handle the downloading and saving of files from a server. These scripts also involve moving the downloaded files from the downloads folder to a user-specific location. When this process is complete, the co ...

javacssfileselenium

Guide on implementing various styles for a class in Tailwind CSS when transitioning to dark mode with the help of Next.js 13.4 and next-theme

Is it possible to apply unique styles for a class in Tailwind CSS when transitioning to dark mode using Next.js 13.4 and next-theme? I am currently setting up a dark theme in Tailwind CSS with Next.js 13.4 utilizing next-theme. Within my globals.css file, ...

cssreactjsnext.jstailwind-css

Having trouble displaying the image on the webpage

Here is the code for my header where I am trying to set the background. <header> <img src="images/MeMain.jpg" alt="Drawing of Me" class="profile-image"> <h1 class="tag name">Hello, I’m Me.</h1> <p class="tag location"> ...

htmlcss