Tutorial

[SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) (Scalable Vector Graphics) is a powerful tool for creating interactive and dynamic graphics on the web. One interesting feature is the ability to animate and manipulate shapes along a predefined path. In this article, we will explore the step-by-step process of implementing this feature using [TypeScript](https://www.typescriptlang.org/). {% codepen https://codepen.io/1rosehip/pen/oNaKRyN %} ## Table of Contents - [HTML Markup](#html-markup) - [TypeScript](#typescript) - [Drag and Drop](#drag-and-drop) - [Ellipse Movement](#ellipse-movement) - [Summary](#summary) ## HTML Markup First, let's define an HTML file called `index.html` that will serve as the container for our SVG element and any accompanying JavaScript and CSS files. ```html Tutorial ``` Let's add an [SVG element](https://developer.mozilla.org/en-US/docs/Web/SVG/Element) with a width of 500 pixels and a height of 300 pixels using the following code: ```html ``` The ` Tutorial ``` Now let's implement the basic drag and drop flow. The code below attaches event listeners to the $pointer element to handle mouse and touch events. ```ts /** * This is where we place all the initialization logic. */ const init = () => { const $svg = document.getElementById('svg'); const $pointer = document.getElementById('pointer'); if(!$svg || !$pointer) return; /** * Here will be all the logic related to pointer movement. */ const onValueChange = (evt: MouseEvent | TouchEvent) => { console.log(evt); } /** * Add event listeners as soon as * the user presses the mouse button. */ const onMouseDown = (evt: MouseEvent) => { evt.preventDefault(); onValueChange(evt); window.addEventListener('mousemove', onValueChange); window.addEventListener('mouseup', onMouseUp); }; /** * Remove event listeners as soon as * the user releases the mouse button. */ const onMouseUp = () => { window.removeEventListener('mousemove', onValueChange); window.removeEventListener('mouseup', onValueChange); }; // Attach event listeners to the $pointer element // to handle mouse and touch events. $pointer.addEventListener('mousedown', onMouseDown); $pointer.addEventListener('mouseup', onMouseUp); $pointer.addEventListener('touchmove', onValueChange); $pointer.addEventListener('touchstart', onValueChange); }; init(); ``` In the code above we add event listeners for the mouse and touch events on the $pointer element. When the user presses or releases the mouse button on the element, the relevant function will be called to handle the event. ## Ellipse Movement First we need to find out the mouse coordinates. The way it is determined will be different for mouse events and touch events. One way to do this is to use the `evt.type `property, which represents the type of event that occurred: ```ts const onValueChange = (evt: MouseEvent | TouchEvent) => { let mouseX, mouseY; const isMouse = evt.type.indexOf('mouse') !== -1; if(isMouse){ // Mouse events mouseX = (evt as MouseEvent).clientX; mouseY = (evt as MouseEvent).clientY; } else{ // Touch events mouseX = (evt as TouchEvent).touches[0].clientX; mouseY = (evt as TouchEvent).touches[0].clientY; } console.log(mouseX, mouseY); } ``` Let's also define some constants, such as the radii of the ellipse and its center. In actual production code, we can find these values dynamically, but in this demo, we define them as constants to keep the code simple. ```ts // The ellipse path radii constants. const RADIUS_X = 220; const RADIUS_Y = 120; // The absolute top left coordinates of the SVG. const { left: ABS_SVG_LEFT, top: ABS_SVG_TOP, width: SVG_WIDTH, height: SVG_HEIGHT } = $svg.getBoundingClientRect(); // The center of the SVG. const SVG_CENTER_LEFT = SVG_WIDTH/2; const SVG_CENTER_TOP = SVG_HEIGHT/2; ``` These lines calculate the center coordinates of the SVG element and store them in variables `SVG_CENTER_LEFT` and `SVG_CENTER_TOP`. The [getBoundingClientRect()](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) method is called on the $svg element to obtain its bounding rectangle, which includes properties like `left`, `top`, `width`, and `height`. Using destructuring assignment, the values of left and top properties are extracted and assigned to `ABS_SVG_LEFT` and `ABS_SVG_TOP` variables respectively. ```ts const onValueChange = (evt: MouseEvent | TouchEvent) => { let mouseX, mouseY; const isMouse = evt.type.indexOf('mouse') !== -1; if(isMouse){ mouseX = (evt as MouseEvent).clientX; mouseY = (evt as MouseEvent).clientY; } else{ mouseX = (evt as TouchEvent).touches[0].clientX; mouseY = (evt as TouchEvent).touches[0].clientY; } // Calculate the relative mouse position. const relativeMouseX = mouseX - ABS_SVG_LEFT - SVG_CENTER_LEFT; const relativeMouseY = mouseY - ABS_SVG_TOP - SVG_CENTER_TOP; } ``` By subtracting the coordinates of the SVG center from the mouse coordinates, the resulting values `relativeMouseX` and `relativeMouseY` represent the mouse's position relative to the center of the SVG element. Now we need to calculate the angle inside the ellipse that represents the current mouse position. We can use the `Math.atan2()` function that returns the angle in radians between the positive x-axis and the point represented by the mouse. ```ts const angle = Math.atan2( relativeMouseY / RADIUS_Y, relativeMouseX / RADIUS_X ); ``` - `relativeMouseX / RADIUS_X`: This expression calculates the relative horizontal distance from the SVG center along the x-axis. - `relativeMouseY / RADIUS_Y`: This expression calculates the relative vertical distance from the SVG center along the y-axis. Now that we have the angle, we can calculate the new coordinate of the pointer's center along the ellipse path. To do this, we can use the [parametric equation of an ellipse](https://www.mathopenref.com/coordparamellipse.html): ``` x(angle) = radius1 * cos(angle) y(angle) = radius2 * sin(angle) ``` So the final part of the `onValueChange()` function would be: ```ts const newX = SVG_CENTER_LEFT + Math.cos(angle) * RADIUS_X; const newY = SVG_CENTER_TOP + Math.sin(angle) * RADIUS_Y; // Update the pointer's center coordinates. $pointer.setAttribute('cx', newX.toString()); $pointer.setAttribute('cy', newY.toString()); ``` In the provided code, two variables `newX` and `newY` are calculated based on the angle and the radii of the SVG ellipse. These variables represent the new center coordinates for the `$pointer` element. Then, the `cx` and `cy` attributes of the $pointer element are updated to move it to the new coordinates. ## Summary The final result can be found in this [codepen](https://codepen.io/1rosehip/pen/oNaKRyN) and also on [GitHub](https://github.com/mzusin/articles/tree/main/how-to-drag-a-shape-along-an-svg-ellipse-path). This code can easily be adapted to a circular path instead of an ellipse by making one radius instead of two. Please check [this codepen](https://codepen.io/1rosehip/pen/poQzKyP) as an example. I hope this article was interesting and helpful in your programming journey. Happy coding! 🙃 Also please take a look at [Tool Cool Range Slider](https://github.com/mzusin/toolcool-range-slider) project. It is a responsive range slider library written in typescript and using web component technologies. It has a rich set of settings, including any number of pointers (knobs), vertical and horizontal slider, touch, mousewheel and keyboard support, local and session storage, range dragging, and RTL support.

mzusin

How to Drag a Shape Along an SVG Ellipse Path: A Step-by-Step Guide

Join Our Newsletter. No Spam, Only the good stuff.