Animate an object moving in a circular path using snap.svg

I am trying to animate a loaded SVG in a circular motion. Here is the code I have so far, where my goal is to rotate the object in a circle with a radius of 30:

var svgObject = Snap("svg#object g");
var path = svgObject.path("M0 0 a60 60 0 0 0 30 30");
var pathLength = path.getTotalLength();

Snap.animate(0, pathLength, function(value) {
   movePoint = path.getPointAtLength(value);
   svgObject.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y));
}, 5000, mina.easeOut);

I understand that the current code only moves the object to the right and does not complete a full circle. My desired outcome is for the object to return to its original position after completing a circle.

What changes should be made to the existing code in order to achieve this?

javascriptanimationsvgpathsnap.svg

Answer №1

Including the full code and markup makes it much easier to troubleshoot. It seems like you may be attempting to manipulate the main svg object instead of the g object, based on the edited code I see. Also, make sure your path for animation is correct. Although I can't test it without seeing the markup, here's a functional example:

To adjust the circle path, ensure it only includes the necessary section.

var svgObject = Snap("#svgobject");
var groupObject = Snap('#svgobject g');

var path = svgObject.path("M 100, 100m -75, 0a 75,75 0 1,0 150,0a 75,75 0 1,0 -150,0").attr({ fill: 'none' });


var pathLength = path.getTotalLength();

Snap.animate(0, pathLength, function(value) {
   movePoint = path.getPointAtLength(value);  
    
    groupObject.transform('t' + parseInt(movePoint.x) + ',' + parseInt(movePoint.y));
}, 5000, mina.easeOut);
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

<svg id="svgobject" height="800" width="800>
    <g>
    <rect x="50" y="50" width="50" height="50"/>
    </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

Formatting ternary expressions in VueJS

VueJS is being utilized by me and it contains an expression as shown below: {{ item.recommendation ? "PS4" : "Xbox" }} Is there a way to make "PS4" appear in red color and "Xbox" in blue color within the expression by incorporating CSS ...

javascriptvue.js

Tips on passing an integer to an HTML page with Express.js routing

I've got this Express code that currently redirects to the views/index.html page. What I need now is to send some integers to index.html when a specific function executes in this code. Any suggestions on the most efficient way to accomplish this? cons ...

javascripthtmlnode.jsexpressexpress-router

Changing the value within a deeply nested object

I am facing an issue with a nested object in my code: { id: "id", name: "Name", type: "SC", allgemein: { charname: "Name", spieler: "Jon", }, eigenschaften: { lebenspunkte: "30", }, talente: {}, zauber ...

javascriptreactjsmaterial-ui

Display content when tab is chosen (Foundation)

I have a question regarding the use of Zurb Foundation 6 Tabs and some JavaScript functionality. Below is the HTML code for a layout with 3 tabs: <ul class="tabs" data-tabs id="myTabs"> <li class="tabs-title is-active"><a href="#pa ...

javascriptjquerycssajaxzurb-foundation

What could be the reason behind the jPlayer video not playing?

$("#jPlayer").jPlayer({ ready: function () { $(this).jPlayer("setMedia", { flv: 'http://st1.blive.kg/storage/flv7/2/249162.70951.flv' }); }, swfPath: "/js/Jpl ...

javascriptphphtmlflashjplayer

An error occurred when attempting to search for 'length' using the 'in' operator in the context of the Datatables plugin and jQuery 1.11.3

I implemented the jQuery Datatables plugin in my tables for pagination, sorting, and searching functionalities. However, I am facing issues where the elements are not working properly, and the pagination occasionally fails to display. The Chrome console is ...

javascriptjquerytwitter-bootstrapdatatables

Assign properties to a component from an object

I'm working on connecting React Components to Objects by passing imported Components as Props. const [showComponent, setShowComponent] = useState([ { cId: 1, componentName: <ContactDialogAddresses />, title: 'Address', render: true ...

javascriptreactjs

The view height appears to be incorrect when the browser's developer tools are opened

The background height appears correct, however, when the console is opened, the background shifts upwards creating white space. I have tried setting both height: 100% and height:100vh, but the issue persists. Click here for image description .main { ...

javascripthtmlcss

A guide on customizing the appearance of individual items in a vue v-for loop based on specific conditions

I am currently developing a multiple choice quiz game and I want the selected answer by the user to change color, either red or green, depending on its correctness. To achieve this, I have created a variable called selected that correctly updates when the ...

javascriptcssvue.jsvuejs3v-for

Transforming dynamic tables into JSON format

Whenever a user adds a new row to the dynamic table to input customer information, I require the data to be submitted in JSON format upon clicking the submit button. HTML <table class="table table-bordered table-hover" id="driver"> ...

javascriptjsonpostdynamichtml-table

Ignore the certificate signature in Angular

Reviewing some older Angular code, I came across this: import { Headers, RequestOptions, Http, RequestOptionsArgs } from '@angular/http'; There is a function in the code: getInfo() { var info: RequestOptionsArgs = new RequestOptions({}); inf ...

javascriptangular

Tips for Storing Your Data Collection: A Guide on Different Storage Options

In the different parts of my app, I require access to a dataset containing timezones. Traditionally, I have stored such data in a class method like Timezone.all_zones (Ruby) for easy accessibility anywhere in my code. Is there a way to achieve this same ...

javascriptreactjs

Consistently receiving the identical result even when the checkbox remains unselected

Displaying a Checkbox Input <input id="idCheckbox" name="check" type="checkbox" value="AllValue" style="width: auto; height: auto; font-weight: bolder;" data-bind="checked: idCheckbox" /> The checkbox input will always have the value "AllValue ...

javascriptjquery

Using a JavaScript function to swap out the contents of a div and encountering some unexpected behavior

I am encountering an issue while running a code that generates content using a function. The problem arises when I try to change the content onclick, as none of the CSS is applied again after the change. It's quite perplexing. Below is a generalized ...

javascriptcss

Refine collection of objects based on a separate set of objects

I need to filter an array of objects based on another array of objects. I currently have two arrays of objects structured like this: const array = [ { id: 1, name: 'a1', sub: { id: 6, name: 'a1 sub' } }, { id: 2, name: 'a ...

javascriptarraysfilter

Utilizing jQuery to format HTML code and set it as the text in a Textarea

I am currently working on populating the text for my Textarea using JavaScript (jQuery), as I need to include a variable from JS in it. This is what I have been doing: $("#txt_banner1").text( '<a href="'+producturl+'">< ...

javascriptjqueryhtmltextareacode-formatting

Guide to implementing two unique instances of a module in AngularJs

Let's consider a scenario where we have a file called crudService.js: crudService.module('genericCrudService', ['$http', '$log', 'config', function ($http, $log, config) { .... return { ...

javascriptangularjs

Storing the order of jQuery UI Sortable in the WordPress Admin Panel

My goal is to customize the order of taxonomy terms for each individual post in Wordpress. I have created a metabox on the EDIT POST page that contains custom taxonomy terms and made them sortable using JQuery. Here is my setup on the Wordpress backend: ...

javascriptjqueryajaxwordpressjquery-ui

Pressing the Add button will create a brand new Textarea

Is it possible for the "Add" button to create a new textarea in the form? I've been searching all day but haven't found any logic to make the "Add" function that generates a new textarea. h1,h2,h3,h4,h5,p,table {font-family: Calibri;} .content ...

javascriptjquery

Creating a cutting-edge Windows Phone 8 application with JavaScript on Visual Studio 2013 Ultimate, recently updated to update 2

I am trying to create a windows phone 8 app using java-script in visual studio ultimate 2013 update 2, but I cannot seem to find the option for windows phone 8. Only the option for 8.1 is available. Can someone guide me on how to develop an app for windo ...

javascripthtmlwindows-phone-8visual-studio-2013windows-phone-8.1